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Simoy> 


Before the modern smartphone era, 

Jonathan Simon was coding away at the 
cool phones of the day, writing low level UI 
frameworks and debugging tiny screens (back 
when 176x220 was huge!) with a magnifying 
glass. Since then, he’s worked with all kinds 
of phones, even the new ones with big fancy 
schmancy screens. 

Before working with mobile devices, Jonathan 
spent a good six years working on Wall Street 
designing and building user interfaces for 
trading systems. And no, it’s not his fault the 
stock market tanked, honest! He also can’t give 
you any stock tips. (Sorry!) 



0y\C Joy>a*tV>a^s csfv-csso 
sV>o*ts. |*t book /VlAKy o( 
•these *to y/v'rtc book. 


When he’s not coding or designing, he’s 
probably hanging out with his wife, Felisa, 
or their dog, Billie. Otherwise, he’s probably 
riding (or building) a bike or perfecting his 
espresso extraction. 
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Your First App 

So you’re thinking: “What makes Android so special?” 

Android is a free and open operating system from Google that runs on all kinds 
of devices from phones, to tablets and even televisions. That’s a ton of different 
devices you can target with just one platform! (And the market share is gaining 
too!) Google provides all of the stuff you need to get started building Android apps 
for free. You can build your Android apps on Macs, Windows, or Unix and publish 
your apps for next to nothing (with no need for anyone’s approval). Ready to get 
started? Great! You’re going to start building your first Android app, but first there 
are a few things to set up... 
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meet android 

Your first app 

So you’re thinking: “What makes Android so special? ，’ 

Android is a free and open operating system from Google that runs on all kinds 
of devices from phones, to tablets and even televisions. That’s a ton of different 
devices you can target with just one platforml (And the market share is gaining 
too!) Google provides all of the stuff you need to get started building Android apps 
for free. You can build your Android apps on Macs, Windows, or Unix and publish 
your apps for next to nothing (with no need for anyone’s approval). Ready to get 
started? Great! You’re going to start building your first Android app, but first there 
are a few things to setup... 

adding behciVi9T 

Give your app an action 

Apps are interactive! When it comes to apps ， it’s what your users can 
do with your apps that make them love 'em. As you saw in Chapter 1, Android 
really separates out the visual definition of your apps (remember all that 
XML layout and String resource work you just did!) from the behavior that’s 
defined in Java code. In this chapter, you’re going to add some behavior to the 
AndroidLove haiku app. And in the process you’ll learn how the XML resources 
and Java work seamlessly together to give you a great way to build your Android 
apps! 

Work With feeds 

Pictures from space! 

RSS feeds are everywhere! From weather and stock information to 
news and blogs, huge amounts of content are distributed in RSS feeds and just 
waiting to be used in your apps. In fact, the RSS feed publishers want you to use 
them! In this chapter, you’ll learn how to build your own app that incorporates 
content from a public RSS feed on the Web. Along the way, you’ll also learn a little 
more about layouts, permissions, and debugging. 
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long-running processes 

When things take time 

It would be great if everything happened instantly, unfortunately, 

some things just take time. This is especially true on mobile devices, where network 
latency and the occasionally slow processors in phones can cause things to take a 
bit longer. You can make your apps faster with optimizations, but some things just 
take time. But you can learn how to manage long-running processes better. In this 
chapter, you’ll learn how to show active and passive status to your users. You’ll also 
learn how to perform expensive operations off the Ul thread to guarantee your app is 
always responsive. 

multiple-device support 

Run your app everywhere 

There are a lot of different sized Android devices out 

there. You’ve got big screens, little screens, and everything in between. And it’s 
your job to support them all! Sounds crazy, right? You’re probably thinking right 
now 'How can I possibly support all of these different devices?" But with the 
right strategies, you’ll be able to target all of these devices in no time and with 
confidence. In this chapter, you’ll learn how Android classifies all of these different 
devices into groups based on screen size as well as screen density. Using these 
groups, you’ll be able to make your app look great on all of these different devices, 
and all with a manageable amount of work! 

optimising fot tablets 

Tablets are not just big phones 

Android tablets are coming onto the scene. These new larger- 

format Android devices give you an entirely new hardware format to present new 
and cool apps to your users. But they are not just big phones! In this chapter, 
you’ll learn hot to get your app up and running on a tablet. You’ll learn about the 
new screen size groupings and also how to use Fragments to combine multiple 
Activities on a single screen. So more importantly then just running on tablets in 
this chapter, you’ll learn about how to make your app work better on them. 
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lists and adapters 

Building a list-based app 

Where would we be without lists? They display read-only information, 
provide a way for users to select from large data sets, or even act as navigational 
device by building up an app with a list-based menu structure. In this chapter, you’ll 
learn how to build an app with a list. You learn about where lists store data (in Adapters) 
and how to customize how that data is rendered in your list. You’ll also learn about 
adding additional layouts to your app (not just the layout that the Wizard creates for 
you) and turn that into a real view. 

multi-screen apps 

Navigation 

Eventually you’ll need to build apps with more than one 

Screen.. So far, all of the apps you’ve built only have a single screen. But the 
great apps you’re going to build may need more than that! In this chapter, you’ll 
learn how to do just that. You’ll build an app with a couple of screens, and you’ll 
learn how to create a new Activity and layout which was previously done for you 
by the Wizard. You’ll learn how to navigate between screens and even pass data 
between them. You’ll also learn how to make your own Android context men- the 
menu that pops up when press the Menu button! 


database persistence 

Store your stuff with SQLite 

In memory data storage only gets you so far. in the last chapter, 

you built a list adapter that only stored data in memory. But if you want the app to 
remember data between sessions, you need to persist the data. There are a few ways 
to persist data in Android including writing directly to files and using the built in SQLite 
database. In this chapter, you’ll learn to use the more robust SQLite database solution. 
You learn how to create and manage your own SQLite database. You’ll also learn how 
to integrate that SQLite datase with the ListView in the TimeTracker app. And don’t 
worry, if you’re new to SQL, you’ll learn enough to get started and pointers to more 
information. 
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relcitlVelayout 

It’s all relative 

You’ve created a few screens now using LinearLayouts 
(and even nested LinearLayouts). But that win only get you so far. 
Some of the screens you’ll need to build in your own apps will need to do things 
that you just cant’ do with LinearLayout. But don’t worry! Android comes with other 
layouts that you can use. IN this chapter, you’ll learn about another super powerful 
layout called RelativeLayout. This allows you to layout Views on screen relative to 
each other (hence the name). It’s new way to layout your Views, and as you’ll see 
in the chapter, a way to optimize your screen layouts. 

tweaking your m 
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Giving your app some polish 

With all the competition in the marketplace, your apps 
must do more than just work. They have to look great doing 
it! Sometimes, basic graphics and layouts will work. But other times, you’ll need to 
crank it up a notch. In this chapter, you’ll learn about a new layout manager called 
Relative Layout. It'll let you lay out your screens in ways that you just can’t do with 
LinearLayout and help you code your designs just the way you want them. You’ll 
also learn more techniques for using images to polish up the look and feel of your 



app. Get your app noticed! 

content providers 

Make the best of what you can use 

ou don’t want to reinvent the wheel, do you? of course you 

on’t; you’ve got apps to build! Well, one of the awesome benefits of Android is the 
ase in which you can use bits of other applications with content providers. Android 
apps can expose functionality they want to share and you can use that in your apps. 
But this doesn’t work only for market apps; a number of built-in apps (like the Address 
Book) expose stuff you can use in your apps too. In this chapter, you’ll learn how to 
use content providers in your app. And who knows, you might like this whole content 
provider thing so much, you’ll decide to provide some of your own content to other 


apps! 


ix 



h9Wt9 use this book 

Intro 




xi 









how to use this book 


Who is this book for? 


If you can answer “yes” to all of these: 

(^3 Have you done some Java programming, but don’t 
consider yourself a master? 


❺ 


Do you want to build mobile apps for an awesome mobile 
OS that runs on tons of devices? 



Do you prefer stimulating dinner party conversation to dry, 
dull, academic lectures? 


this book is for you. 


Who should probably back away from this book? 

If you can answer “yes” to any of these: 



Have you already mastered Android programming but 
need a solid reference? 


❺ 

o 


Are you solid with the basic Android development 
fundamentals and are just looking for a guide to its 
super-advanced features, like ADL or services? 


Are you afraid to try something different? Would you 
rather have a root canal than mix stripes with plaid? 
Do you believe that a technical book can’t be serious 
if it anthropomorphizes control groups and objective 
functions? 


this book is not for you. 





-Pv-om this book 
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the intro 


Wc know what yo uVg thmkmg 

“How can this be a serious Android development book?” 
“What’s with all the graphics?” 


U 


Gan I actually learn it this wa^ 




Wc know what your brain is thmkmg 

Your brain craves novelty. It’s always searching, scanning, waiting for something 
unusual. It was built that way, and it helps you stay alive. 

So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s real job — recording things that matter. It doesn’t bother saving the 
boring things; they never make it past the “this is obviously not important” 
filter. 

How does your brain know what’s important? Suppose you’re out for a day 
hike and a tiger jumps in front of you, what happens inside your head and 
body? 

Neurons fire. Emotions crank up. Chemicals surge. 

And that’s how your brain knows... 

This must be important! Don’t forget its 








But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. 
You’re studying. Getting ready for an exam. Or trying to learn some tough 
technical topic your boss thinks will take a week, ten days at the most. 

Just one problem. Your brain’s trying to do you a big favor. It’s trying to 
make sure that this obviously non-important content doesn’t clutter up scarce 
resources. Resources that are better spent storing the really big things. 

Like tigers. Like the danger of fire. Like how you should never have 
posted those “party” photos on your Facebook page. And there’s no 
simple way to tell your brain, “Hey brain, thank you very much, but 
no matter how dull this book is, and how little I’m registering on the 
emotional Richter scale right now, I really do want you to keep this 
stuff around.” 


you are here ► xiii 



how to use this book 


娜融 o£ a “Head BP 气 ’ ^ t ^ en make sure you 

So what does it take to /earn something^ Based Qn the |atest research 

don^t forget it. If snot psychology, /earn/ng takes a lot 

Some of the Head First learning principles: 

Make it visual, images are far more =======&«). It 相 mates 

much more effective (up t0 厂 二: ^一 wit hin or near the graphics they 

：；： r — - — - W，M " " t0 

likely to solve problems related to the content. ^ ^ 

Use a conversational and P ⑽ f t0 the reader , using a first-person, conversat.onal 
better on post-learning tests if the :=丄 lecturin g. Use casual language. Don, take 

^ - — - a — dinner party ~ 

• ._ on i v i n other words, unless you actively 

Get the learner to think more . vour head A reader has to be motivated, 
flex your neurons, nothing much happens m y . ⑽ ㈣⑽， and generate new 

-T d d c :: s = — 。_ — 

knowledge. And for that, y mu , tiple senses . 

G et-and keep—the readers attention We veal ^ of ordinary> interesting , 

::; p ： e p r^ ― - h ' technica, topic doesn，t have t0 be bonn9 ' Your 

brain will learn much more quickly if it s not. 

is largely dependent on its emotiona ^ ^ not talking heart-wrenching 

You remember when you feel soraeX 抑如⑽ like surprise, curiosity, fun, 

dories about a and h.s dog. Qmes when you solve a puzzle, learn 

~ ： ^----- eaii 7 ° u r ow somethingthan，m 

m0 re technical than thou» Bob from engineering doesn . 層 
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the intro 


Metacognition: thmking about thmkmg 

If you really want to learn, and you want to learn more quickly and more 
deeply, pay attention to how you pay attention. Think about how you think. 

Learn how you learn. 

Most of us did not take courses on metacognition or learning theory when we 
were growing up. We were expected to learn, but rarely taught to learn. 

But we assume that if you’re holding this book, you really want to learn 
Android. And you probably don’t want to spend a lot of time. If you want to 
use what you read in this book, you need to remember what you read. And for 
that, you’ve got to understand it. To get the most from this book, or any book 
or learning experience, take responsibility for your brain. Your brain on this 
content. 

The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 

Otherwise, you’re in for a constant battle, with your brain doing its best to 
keep the new content from sticking. 

So just how DO you get your brain to treat Android 
like it was a hungry tiger? 

There’s the slow, tedious way, or the faster, more effective way. The 
slow way is about sheer repetition. You obviously know that you are able to learn 
and remember even the dullest of topics if you keep pounding the same thing into your 
brain. With enough repetition, your brain says, “This doesn’t feel important to him, but he 
keeps looking at the same thing over and over and over, so I suppose it must be.” 

The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 

A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 

But pictures and conversational style are just the beginning … 
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Here's what WE did: 

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing the text refers to, as opposed to in a caption or buried in the 
text somewhere. 

We used redundancy : saying the same thing in different ways and with different media types, 
and multiple senses, to increase the chance that the content gets coded into more than one area 
of your brain. 

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, 
and we used pictures and ideas with at least some emotional content, because your brain 
is tuned to pay attention to the biochemistry of emotions. That which causes you to feel 
something is more likely to be remembered, even if that feeling is nothing more than a little 

humor, surprise, or interest. 


We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 

We included more than 80 activities, because your brain is tuned to learn and remember 
more when you do things than when you read about things. And we made the exercises 
challenging-yet-do-able, because that’s what most people prefer. 

We used multiple learning styles, because joz/ might prefer step-by-step procedures, while 
someone else wants to understand the big picture first, and someone else just wants to see 
an example. But regardless of your own learning preference, everyone benefits from seeing the 
same content represented in multiple ways. 

We include content for both sides of your brain, because the more of your brain you 
engage, the more likely you are to learn and remember, and the longer you can stay focused. 
Since working one side of the brain often means giving the other side a chance to rest, you 
can be more productive at learning for a longer period of time. 

And we included stories and exercises that present more than one point of view ， 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 

We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work at 
something. Think about it — you can’t get your body in shape just by watching people at the 
gym. But we did our best to make sure that when you’re working hard, it’s on the right things. 
Thatj^oiiV^ not spending one extra dendrite processing a hard-to-understand example, 
or parsing difficult, jargon-laden, or overly terse text. 

We used people. In stories, examples, pictures, etc., because, well, because a person. 
And your brain pays more attention to people than it does to things. 
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Here's what YOU caw do to bend 
your brain iwto submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 

Cu*t -this ou-fc 3hd s-fci^k 

1 七 0 h y° ulr 


o Slow down. The more you understand, the 
less you have to memorize. 

Don’t just read. Stop and think. When the book asks 
you a question, don’t just skip to the answer. Imagine 
that someone really is asking the question. The 
more deeply you force your brain to think, the better 
chance you have of learning and remembering. 

o Do the exercises. Write your own notes. 

We put them in, but if we did them for you, that 
would be like having someone else do your workouts 
for you. And don’t just look at the exercises. Use a 
pencil. There’s plenty of evidence that physical 
activity while learning can increase the learning. 

❺ Read the “There are No Dumb Questions” 

That means all of them. They’re not optional 
sidebars, they ’re part of the core content! 

Don’t skip them. 


o Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 

o Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

o Feel something. 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 


Make this the last thing you read before bed. 
Or at least the last challenging thing. 


Part of the learning (especially the transfer to 
long-term memory) happens afteryow put the book 
down. Your brain needs time on its own, to do more 
processing. If you put in something new during that 
processing time, some of what you just learned will 
be lost. 


(@) Talk about it. Out loud. 

Speaking activates a different part of the brain. If 
you’re trying to understand something, or increase 
your chance of remembering it later, say it out loud. 
Better still, try to explain it out loud to someone else. 
You’ll learn more quickly, and you might uncover 
ideas you hadn’t known were there when you were 
reading about it. 


Get your hands dirty! 

There’s only one way to learn to Android: get 
your hands dirty. And that’s what you’re going to 
do throughout this book. Android Development 
is a skill, and the only way to get good at it is to 
practice. We’re going to give you a lot of practice: 
every chapter has exercises that pose a problem for 
you to solve. Don’t just skip over them — a lot of the 
learning happens when you solve the exercises. We 
included a solution to each exercise — don’t be afraid 
to peek at the solution if you get stuck! (It’s easy to 
get snagged on something small.) But try to solve 
the problem before you look at the solution. And 
definitely get it working before you move on to the 
next part of the book. 
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Safari^ 

Books Online 


When you see a Safari® icon on the cover of your favorite 
technology book that means the book is available online through 
the O’Reilly Network Safari Bookshelf. 


Safari offers a solution that’s better than e-books. It’s a virtual library that lets you easily 
search thousands of top tech books, cut and paste code samples, download chapters, 
and find quick answers when you need the most accurate, current information. Try it 
for free at http : / /my. saf aribooksonline . com/ ?portal=oreilly. 
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1 meet android 




參 Your first app ♦ 



Wait, Android is 
a Free and Open 
Source mobile OS? 
Thafs crazy! 


No, wearing that suit with 
that tie is crazy! But, hey, 
you summed up Android 
pretty well. 


So you’re thinking: “What makes Android so special? ’’Android is 

a free and open operating system from Google that runs on all kinds of devices from 
phones, to tablets and even televisions. That’s a ton of different devices you can target 
with just one platform. (And the market share is gaining too). Google provides everything 
you need to get started building Android apps for free. And you can build your Android 
apps on either Mac, Windows, or Unix and publish your apps for next to nothing (and with 
no need for anyone’s approval). Ready to get started? Great! You’re going to start building 
your first Android app, but first there are a few things to setup... 


this is a new chapter 



why android 


So you wawt to build an Android app … 

Maybe your an Android user, you already know Java and 
want to get in on the mobile craze, or you just love the open 
operating system and hardware distribution choices of Android. 
Whatever your reason, you’ve come to the right place. 

Android already rims ow a TON of different devices! 


With careful planning, you’re app can run on all of these 
Android powered devices. From phones and tablets, to TVs and 
even home automation, Android is spreading quickly. 




Tablets. 


Your one app 
can run on all 
/ these devices... 

( 、 


Phones. 


2 Chapter 1 
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your first app 


Thai's a LOT of 

” ...... 一 ，:: :， , ............... : . 

"Over SOO^OOO Android devices [are] activated every ctay” 

— Google’s Head of Android, Andy Rubin, via Twitter 


Just check out the Android Market 

The Android Market has a ton of apps. There are or course 
games (because we all love playing games on our phones), but 
also really great apps that just make our lives better like 
navigation and commuting schedule apps. 


^ AIITrails • Hiking & Biking 

<- c a a https:// markct.android.com/dctails?id-*com.alltrails.alltrails&hl* 



Users who installed this also installed 


T\\c A^dv-oid 

Mav-kc*t xelo Ac … 

-fov- ou*tdoov 

^IIT\ra'»U. • 


There are a lot of mobile platforms out there, but with 
Android’s presence and growth, everyone is building out their 
Android apps. Welcome to Android, it’s a great place to be! 

Before you dig into your first app, let’s take a look at 
exactly what Android is and who’s responsible for it... 
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the android ecosystem 


So tell m about Android 


Android is a mobile operating syetem, but it’s a 
lot more than that too. There is a whole ecosystem, 
a complete platform, and community that supports 
Android apps getting built and on to new Android based 
hardware devices. 



Google maintains Android 

Google maintains Android, but it’s free to use. 
Device manufacturers and carriers can modify 
me, and developers can build apps for free. 





Google gives you the tools 

Google freely distributes the tools for you to 
build your own Android apps. And you can build 
your apps on multiple platforms: Mac ， Windows, 
Linux... 




Hardware manufacturers build a device 

Hardware manufactures can use the Android 
operating system and build special hardware 
around it. Manufacturers can even modify 
Android to implement custom functionality for 
their devices. 



Google also runs a Market 

This is where your users can download their apps 
right to their phones. Google runs one market, 
but there are also others run by Amazon, and 
Verizon for example. But the biggest one is still 
Google’s. 
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your first app 


Are you ready to get started? 


With all these different 
devices and OS variations, how 
do you build anything at all? 
Where do you even start? 


O 



In practice, it’s not so bad! 

It’s true that there are a bunch of different 
Android devices out there, from all kinds of 
different manufacturers running different 
modifications of Android. Sounds crazy right? While 
it definitely takes some care tuning your apps 
for these different devices, you can get started 
building basic phone apps really easily. And that’s 
what you’re going to do right now. 

Later on in the book, you’ll learn strategies for 
dealing with different types of devices like phones 
with different resolutions and even designing for 
phones and tablets in the same app. 

Let’s get started. 


you are here ► 
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the android rockers 


Meet Pajama Pcath 

It’s time to introduce you to an awesome 
rock duo called the Pajama Death! They 
love Android and love to sing about it! 



They write all of their song lyrics in the form of a haiku 

A haiku is an ancient Japanese form of poetry. Each 
poem consists of 3 lines - the first line having 5 syllables, 
the second 7 syllables, and the third line 5 syllables just 
like the first. These poems are meant to be meaningful, 
yet compact... just like your Android apps! 
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your first app 


They're about to play their favorite song for you! 
This owe's called... Android Love! 



Put they need your help! 

They want to make an app with the Android Love 
lyrics to hand out to their fans. But they are Android 
users not Android developers. They heard that 
you were learning to build your own Android apps. 
They were wondering if you would build the app for 
them. And how could you say no? Of course you’ll 
do it, you’re a huge fan! 

OK, let’s get started... 
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getting started 


fretting started 

Just asking you to build an app isn’t a lot to go on. So 
the Pajama Death made a napkin sketch of what 
they want the app to look like. It’s an app showing the 
haiku, with each line of the haiku on a new line. 


^vcv*y aff needs d 
S'mtc sohj "is tailed 
/W\roidl Love, tall aff 
K ^Y\dro\A Love boo. 


ttcirc a\rc the lyvids -to 七 he 
£mdc ii^s a haiku'm 
th\rcc Irncs, l*mc of ihc 
hiku joes oir> i-ts oym I'me- 




i dreanned o-? an phone 

°P 0n source and hacKable 
ftndroid^or -the uoin! 


This looks great 
but how do I start 
building it? 


First you’ve got some setup to do 

Since this is your first Android app, you’ll need 
to setup your development environment. Let’s 
start with a quick look at what you need in your 
development environment to build Android 
apps. Form there, you’ll install your own 
development environment, then build the app 
for Pajama Death'. 
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your first app 


Meet the android development ewvirowmcwt 


The Android development environment 
is made up of several parts that seamlessly 
work together for you to build Android 
apps. Let’s take a closer look at each one. 



Eclipse Integrated Development 
Enviroment (IDE) 

The Eclipse Integrated Development 
Environment (IDE for short) is where you’ll 
write your code. Eclipse is a generic IDE, 
not specific to Android development. It’s 
managed by the Eclipse foundation. 



Android Development Tools (ADT) 

The Android Development Tools (ADT) 
is an Eclipse plugin that adds Android 
specific functionality to Eclipse. 


❺ Software Development Kit (SDK) 

The Android Software Development Kit 
(SDK) contains all of the lower level tools 
to build, run and test your Android apps. 
The ADT is really just a user interface, and 
the guts of the app building all happens 
here in the ADT 



Android Packages 

You can develop and support multiple 
versions of Android from the same 
developmentw environment. These 
packages add functionality to the base 
SDK to let you develop for that Android 


You use 
^/'mdoy/s ov* Lmu% 七 o 
build f[Y\dyo\A affs. 



Edlipsc is 
by ihc cdlifsc 
-fouy>d3*tioy>. 


Android 
Development 
Tools (ADT) 



Evciry-thihj else is 
by google. 
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your development environment 


Choosing your IPE 


Eclipse may be a fine IDE, but 
what if you don’t want to use it. 
You may have your own IDE of 
choice that you’d rather use... 



I will only write code 
in VI or Emacs. Does 
this mean I can’t 
write Android apps? 


You don’t have to use Eclipse. 

But it certainly makes things easier. The full 
integrated Android development environment 
works well as a whole to help you easily build 
Android apps. 

But everything you need to build and test your 
Android apps is the Android SDK and Android 
Packages. If you really cant live without your 
favorite development environment,, you can use it 
in conjunction with the SDK without Eclipse and 
still build Android apps. 


Even tkougk you can use tke 

SDK witkout Eclipse, all ol tke 

examples in tkis Look will use 
Eclipse anct tke ADT plugin. 
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your first app 



Theres some major 
app construction projects 
up ahead. DoiVt go any 
further until youve 
installed your IDE! 


Set up your development environment 

You won’t be able to build your apps until your 
development environment is setup! Follow our 
nifty Android development environment setup 
instructions over the next few pages and you’ll be 
ready to build your apps! 


Turn the page for instructions 
on setting up your own Android 
development environment... 
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eclipse and the SDK 


Pownload. install and launch eclipse 

Eclipse is a free and open source IDE managed by the Eclipse 
foundation (started and managed by IBM, but a very open 
community). You can download Eclipse for free from the eclipse, 
org. There are a number of different versions of Eclipse optimized 
for different types of development. You should download the latest 
version of Eclipse Classic for your Operating System. 



http :// www.eclipse.org/downloads 


Eclipse Downloads 




eclipse.org/downloads/ 



Horr>e Downloads Users Members Committers Resources Projects About Us 


Eclipse Downloads 




Packages Projects 


Compare Packages Older Versions 


Eclipse Helios (3.6.1) Packages for 


Mac OS X (Cocoa) 






Eclipse IDE for Java Developers. 98 mb 

DcyMnAoaoeO 152.206 Tvn&s Details 

Eclipse Classic 3.6.1. 169 mb 

115,905 Tvnes Details Other Downloads 


Eclipse IDE for Java EE Developers. 204 mb 

9B.518 Tvnes Details 


■ Mac OS X 32 Bit 
Z Mac OS X 64 Bit 


唇 Mac 

Mac 


OS X 32 Bit 
OS X 64 Bit 


You 
envi 
5 JR 
prov 
of th 
U&e 
spec 


Eclipse IDE for C/C++ Developers, 67 mb 


m Mac OS X 32 Bit 
Z Mac OS X 64 Bit 


Mac OS X 32 Bit 


After you download Eclipse, follow the installation instructions for 
your platform and launch Eclipse. When you launch Eclipse for the 
first time, you will be prompted to enter a workspace location., 
a directory where all of your Eclipse projects and settings will be 
stored. Feel free to use the default or enter your own. 


e 




Workspace Launcher 


Select a workspace 

Eclipse Platform stores your projects in a directory called a workspace. 
Select the workspace directory to use for this session. 


Workspace: /Users/daniel/Documents/workspace 



Browse. 


一 Use this as the default and do not ask again 


Cancel i 


youv- 

wovkspadc lodaiioh 

di\rcd-to\ry hcvc. 
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your first app 


Poanload and install the SPK 

The Android SDK contains the core tools 
needed to build and run Android apps. This 
includes the Android emulator, builder, docs 
and more. You can download the SDK from 
android.developer.com. 


http :// developer.android.com/sdk/index.html 



Android SDK | Android Dev x 
O O developer.android.com/sdk/index.html 


fea B 


» 


ood^oo 


developers 


Home 



Android SDK Starter Package 

Installing the SDK 


Downloadable SDK Components 

Adding SDK Components 

Android 22 Platform 
Android 2.1 Platform 
Android 1.6 Platform 
Android 1.5 Platform 
► Older Platforms 

SDK Tools, r7 newl 
USB Driver for Windows, r3 

ADT Plugin for Eclipse 

ADT 0.9.9 

Native Development Too 》 

Android NDK, 「 4b 


More Information 


9 English 


Search 


Dev Guide 


Reference 


Resources 


Videos 


Blog 


Download the Android SDK 


Welcome Developers! If you are new to the Android SDK. please read the Quick Start, below，for an overview 
of how to install and set up the SDK. 

If you are already using the Android SDK and would like to update to the latest tools or platforms，please use 
the Android SDK and A VD Manager to get the components, rather than downloading a new SDK package. 



Platform 

Package 

Size 

MD5 Checksum 

Windows 

android-sdk r07-windows.ziD 

23669664 bytes 

69c40c2d2e408b623156934f9ae574f0 



Mac OS X (intel) android-sdk r07-mac x86.zip 19229546 bytes Of330ed3ebb36786faf6dc72b8acf819 
Linux (i386) android-sdk r07-linux x86.tqz 17114517 bytes el0c75da3d 1 aa 147ddd4a5c58bfc3646 


powload *b^c 
Jfov 70UV fla*b^ovm 


Once you download the SDK zip file, unzip it 
to your hard drive and the SDK is ready to go. 


Now let’s setup the ADT... 
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the eclipse plugin 


Install the APT 

The Android Development Tools (ADT) are the glue that 
seamlessly connects the Android specific SDK with Eclipse. 
The ADT is an Eclipse plugin, and it installs through the 
standard Eclipse plugin installation mechanism (so this 
should look very familiar if you’re an experienced Eclipse 
user). 


From your Eclipse window, select Help Install new 
software. This will bring up the Available Software window. 

Since this is being installed from scratch, you’ll need to 

create a new site for the ADT. _ Errtev" *tKis 

URL *m*to 




七 e% 七 -f ield- 
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Configure the APT 

The ADT is just the glue between the SDK and Eclipse, so 
the ADT needs to know where the SDK is installed. 

Set the SDK location in the ADT by going to Window 
Preferences in Eclipse, selecting Android from the left panel, 
and selecting the directory where you installed the Android 
SDK. 


i\\t list 


the palh wheve you 

^zipped the A^dv-oid SDK 


type filter text 

General 
Android 

Buitdl 
DDMS 
Lj ii rich 
Log Cat 
Usage Suts 

► Anl 

► Help 

► Install/Updale 
►Java 

Plug-in Developrinent 
Run/Debug 
Tasks 
Team 

► XML 


Preferences 


Android 


Android Preferences 



P ， 


T -W 


5DK Location: / Deve I d p€ r/A ppl i cat i □ ns /and ro i d - s d k- in ac_S 6 y Browse … 

Note: The list of SDK Targets belDW is only reloaded once you hit 'Apply* or 'OK 1 . 


Target Name 

Vendor 

Platform API L€Vf 


No target available 



Restore Defaults 


Apply 


Cancel J 


OK 





6ee} BifS 


Pv-css 0^. 


It’s a good idea to add the <SDK-install-directory>/ 
tools directory to your path. The SDK includes a number of 
command line tools and it’s convenient to be able to launch them 
without having to type in complete paths. 
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installing packages 


Install android packages 

The SDK is designed to allow you to work with 
multiple versions of Android in the same development 
environment. To keep downloads small, the SDK version 
packages are separated from the SDK. (This also allows 
you to update to new versions of Android without having 
to re download the entire SDK. Pretty slick!) 

You can configure the installed packages in the SDK 
from the Android SDK and AVD Manager (another 
added bonus of the ADT). Open the manager by 
selecting Window Android SDK and AVD Manager. 
From the left pane, select “Available Packages”. 




A>^d\roid SDK 

Al/D 


Virtual devices 
Installed packages 
Available packages 


Android SDK and AVD Manager 

SDK Location: f Users/jonathansimon/android-sdk-mac_xS6 / 
Packages available for download 


Sclcdi 

available 

fadka^cs. 



Add Add-on Site. 


Delete Add-on Site … 一 网 Dis 〔 Refresh 〕 ^ Install Selected 


A 


When you expand the tree node, you’ll see a combination 
of SDK Tools, SDK platforms, samples documentation 
and more. These are all plugins to the SDK that you can 
add to expand the functionality of the SDK. (This way 
you can download and install the SDK once and keep 
adding new functionality to it as new versions come out). 
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Android SDK and AVD Manager 


Virtual devices 
Installed packages 
AvaiEabDe packages 


Sclc^-t 

3 妁 (jhroid 



SDK Location: / Users/jonathansimon / android-sdk-mac_xS6/ 

Packages available for download 
li-jAfidroid Repository 

j -' i SDK Platform Android 233, API 10, revision 2 
! ： 6-Third party Add-ons 


De scri pti on_ 

Android SDK Platform 2.3,3 a rZ 


Bress u /hs-fe^| 

Sele 乙 *ted" 






Select "SDK Platform 
Android 2.3.3 〃 and 
press "Install Selected”. 


tWei^e no ^ 

Dumb Questions 


What about the samples should I install those? 

Google put together a set of sample apps that show off a 
bunch of features and techniques in the platform. They won’t be 
used in the book, but they are extremely useful. If you want to 
learn about something not covered in the book, the samples are a 
great place to start. 


Q/ And what about Tools? Should I install those too? 

The tools inside the SDK can also get updated as new 
functionality is released in the Android platform. It's a good idea to 
keep these up to date. 
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make your own project 


Make a new Android app project 

Now that you have your environment setup, it’s time to make 
your first project. 

The Eclipse ADT plugin comes with a Wizard to create 
new Android apps. All you have to do is enter a few bits of 
information into the wizard, and it makes a fully functional 
(but very boring) application for you. 

Launch the New Android Project wizard by going to File 
New Android Project, then fill in the fields to make your 
new project! 


Kcw A^dv*oid 

wiz^\rd- 


1 


CalKhe yrojeci u A^a^roiaLovc w This 
IS "the app hamc youv use vs will 


see. 


New Android Project 


New Android Project 

An SDK Target must be specified 


Proje« name: AndroidLove 
Contents 




Call f\rojcd*b 


■ 孬 ■ 



Build Target 


Target Namrue 


Ve ndor 


Platform API 


" —: Android 1,5 

Android Open 5ource Project 

1-5 

3 

□ Google APIs 

Google Inc. 

1-5 

3 

□ And road JL‘6 

Android Open Source Piroject 

1.6 

4 

i 1 Google APIs 

Google Inc, 

1.6 

4 

□ Android 2,1-Lipdlatel 

Android Open 5oLirce Project 

2.1-update 7 

口 Google APIs 

Google Inc. 

21 ， 

update 7 

□ Android 2.2 

Android Open Source Project 

2,2 

S 

! 1 Google APIs 

Google Inc. 

2-2 

8 

c~ 



3 1 ^ ► 1 



Properties 


Min SDK Version: 


Srt fa 乙 kay name -bo u ar\dv-o'id • ^ Application name: AndroidLove 

lov^. n*is W\W be used ^ tVic java ’ ^ Package name: android Jove 

patka^c r.amc m yo^ Cre " te ActivSly: 卜 ― ㈣ 

Leave w Cv-ca*tc cMtcktd Call ^ 

the w ttaikuPisplay w . This v/ill 

jc^cv-a*tc the bchaviov toAt -fov youv 
street disflaymg the hauki. 



⑦ 









< Back 

ZD c 

Next > 

Jj 

Cancel 

)f 

Finish 
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your first app 


Whaf $ iw aw Android project? 


Wizards are great because they do a lot of basic setup 
for you. But what did that wizard do anyway? Here’s 
a quick look at the basic Android project that the 
wizard created. To look at the project contents, click 
on the “Package Explorer’’ tab in Eclipse. 




T\\t Ellipse 
Package 
E%flov-cv- tab- 




Behavior in Java code 

The behavior of Android apps is built with Java 
code. This code controls what happens when 
buttons are pressed, calls to servers, and any 
other behavior that your app is doing. Your 
android projects have a source directory where 
all of the Java code lives. 


Binary assets 


Great apps need to do more than just 
deliver great functionality... they need 
to look great doing it. You’ll be using 
images to style your app and give them 
custom polished looks. The images 
and other raw binary resources in this 
directory are included in your app. 


Resources and XML layo 


For Android apps, layouts are primarily 
defined in XML rather than code. All sorts 
of other properties are defined in XML too 
- like string values, colors, and more. These 
XML files are stored in the res directory. 


S Package Explo Hierarchy! 


^AndroEdLove 



► [Generated Java Files] 

giAfidroid 2.2 




An d roEd Man i f est.xml 
[S] default, pro pe rlies 
proguard.cfg 


Configuration files 


Your app now has Java code, XML resources, and 
binary assets that define it. Configuration files are 
the glue that holds all of it together. Everything from 
the title of your app on the Android home screen, to 
the different screens in your app are defined in these 
configuration files. 
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run your app 


Ruw the project! 

At this point, your new project is all ready to run! 

The wizard not only setup a project for you, but also 
created a very basic runnable Android app. How 

cool is that! 

Test run your apps using the Android emulator 


The Android SDK includes an Android emulator 
desktop application that simulates a complete running 
Android device. It runs a full basic android operating 
system and the default set of Android apps. It’s 
obviously not a complete hardware Android device, 
but it’s about as close as you can get with hardware 
emulation! 




You 

simulate 

u p\rcsscs 

by tl'idk'mj ov\ 
youV" mouse* 




Ruhh'mg A^dv-oid Cmula-tov-. 


5554:default 


H)€) 15:04 





See all your apps. 

Touch the Launcher icon. 




W 一 


MENU] 


e ❹ 



1 

2 

3 

4 

5 

6 

7 

8 

9 

0 

Q 

W 

E 

R 

T 

Y 

ug 

I 

0 

P 

A 

S 

D 

F 

G 

H 

J 

K 

L 

DEL 

<KI 


z 

X 

C 

V 

B 

N 

M 

. 



SYM 

@ 

i ■ 

/ 

f 



T\\t cw>ula*tov- 
also 'mtludcs 

buttons like a 
keyboav-d 
A^dv-oid 
V)dv*di bu*bbcms. 
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TesT DriVq 


To run an Android app from Eclipse, select “Run Run’’ 
and you’ll see a dialog that prompts you for how you want 
to run the project. Since your project is an Android app, 
select “Android Application” and click on “OK”. 

Alternatively, you can run your android apps by pressing 
the “play” button on the Eclipse toolbar. 


-toolbav-. 


java - Eclipse SDK - /MyWork/work/h^ 

Jt C[> 




Play button 


Run As 


Select 3i way to run 'android-love* 

Sele 乙七 A^dv-o'ld - 0Ar droid App Meatier 

jgArdroidJUnitT^t 


: 罰 Java Applet 
fTi lava Application 
JuJUnit Test 



Description 

Runs Android Application! 


py-CSS 01^- 


But instead of seeing an Android app running, you’ll see 
the following dialog. 
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whafs an AVD? 


Why won't the app rim? 

The app didn’t run, and instead you 
were faced with a dialog with an error 
about a target not being found and 
asking you to create a Virtual Device. 


Wait, I thought you 
said I could run the app 
right out of the box! 
Were you lying to me? 


The app is fine to run. 

The issue isn’t with the app the wizard 
generated, the issue is that there no way to run 
it. Your Android development environment 
can built apps for multiple Android versions, 
hardware configurations and screen sizes. So 
when you try and run your app, the Android 
tools don’t know what type of device you want 
to run your app on. 

The solution is to create Android Virtual 
Devices (or AVD for short) that defines a 
particular device’s software version and 
hardware format to run your app in. You 
can think of an AVD as like a saved emulator 
configuration. 

Since you don’t have an AVD setup already 
(and there are no stock AVDs in the Android 
SDK) you have to make your own. 




Da fMs! 





Click Yes on the dialog 
to take you to the AVD 
creation screen. 
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Setup m emulator cowfiguratiow 

Clicking yes on the dialog to create a new AVD takes 
you to the Android SDK and AVD Manager window. 
This is the same place you configured the SDK, but 
now the u Virtual Devices” panel is selected. From 
here, you’ll be able to create a new AVD. 


Virtual devices 
Installed packages 
Available packages 


AVD Name 


A^d\roid ahd M/V /Wa 哼 V 

/Ckk Create 

d Y\t^ do\r\-f 'i5u\ra*bio\r\. 


Android SDK and AVD Manager 


List of existing Android Virtual Devices located at /Users/jonathansimon/.android/avd 

Target Name Platform API Level 

No AVD available — — 



^ ,v/c y ou<r a 


A^dv*oid m 


Create new Android Virtual Device (AVD) 



standard 


Android 2.3.3 - API Level 10 


ARM (armeabi) 


SD Card: 


^IZ "this will ojiMt 
"the Crwila-to\r a ^/Z MB viviual 
SD C ， B\rd, JC^c\ral 



512 

剛 




• 、 Browse. 



Snapshot: 


Skin: 


^ Enabled 


Built-in: Default (WVCA800) 

J Resolution: x 


Hardware: 


Property Value 

Abstracted LCD density 240 

Max VM application heap si 24 
Device ram size 256 


New.. 


Delete 


Override the existing AVD with the same name 


Cancel ~^) 〔 Create AVD 



Ckk 
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bom to run 



Tost DriVq 


Now that you have an emulator configuration set up, run the app again. 
Run it the same was as before by pressing the play button in the toolbar. 
This will first launch the emulator and automatically install your app on 
the emulator and start your app. 
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The Emuiatov 

This week’s interview: 

Getting to Know the Emulator 


Head First： Hey there, Android Emulator. I wanted 
to start by thanking you for joining us tonight. 

Android Emulator： Well, since I am software I do 
have to do what you tell me. Just kidding! Happy to 
be here, as always. 

Head First： Fantastic! Just to clear the air here, 
there’s been some confusion out in the development 
community. Are you a real Android device or, dare I 
say, an imposter? 

Android Emulator： I’m neither, actually. I’m not 
a hardware device, but I’m as close to one as you’re 
going to get with pure software. 

Head First： If you’re not a real device, why exactly 
should we use you? 

Android Emulator： There are some serious 
benefits to me being fully software. For starters, it’s 
easy to quickly test and debug your software without 
having to carry around a hardware device. Plus, 
since I’m fully virtual, I can run as different devices 
at the same time. If you didn’t use me you’d have to 
carry around a bag of phones'. 

Head First： Sounds complicated. How do you keep 
it all straight? 

Android Emulator: Well that’s exactly what 
the emulator configurations are for! They tell 
me everything I need to know, from hardware 
configuration (like screen size), and device 
capabilities (like wireless latency), and even the 
version of Android. Everything I need to know about 
what device I’m supposed to act like is right there! 

Head First: Neat! So not only is it easier to use you 
than a real device for testing, but I can test on all 
different kinds of devices and Android versions using 
you instead of keeping a stack of Android devices 


around! 

Android Emulator： Precisely my friend. Precisely. 

Head First： That all sounds great, but if there’s one 
thing I’ve learned it’s that nothing is ever that easy. 
What’s the catch? 

Android Emulator： The catch is that since I’m not 
a real device, there are some subtle differences in 
how I work than a real hardware device. 

Head First： For example? 

Android Emulator: Well, GPS is a good example. 
When I’m running, I sort of spoof a location based 
on your computers location, but I’m not really using 
GPS, so I can’t be your only test. Photos are another 
good example. I don’t have my own camera, so I 
have to fake it a little. 

Head First： Sounds like mostly hardware specific 
differences. 

Android Emulator： Pretty much. I am emulating 
Android hardware devices after all. 

Head First: I think I Ve got it. You’re really 
useful for basic testing, with a number of different 
configurations. But if I need to test something 
hardware specific, nothing beats real world 
hardware. 

Android Emulator: Bingo! 

Head First： Great. Thanks for joining us! Now ， 
don’t you have some apps to run? 

Android Emulator： Sheesh! Always making me 
work! Anyway, always a pleasure. I’m off to help 
more developers test their apps! 
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next steps 


Let's get some feedback! 


You’ve just got your first (although pretty boring) 
app up and running. Before going on, let’s get 
some quick feedback. 


0 


This app is OK... but the 
whole point is to show the 
haiku lyrics to our fans! 
This isn*t the haiku! 



It’s OK. You’re not that far off... 

OK, it’s true. Your app isn’t displaying a 
haiku. But take a step back and compare the 
app you have with the app that was sketched 
out. You’ll see they are pretty close. 
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Check for differences 

The app you have and the sketch for the app 
you want are pretty similar. The only difference 
is that the main text display is displaying a 
boring hello world message instead of the haiku. 
Now you just need to replace the boring string 
with the haiku and you’ll be done with the app. 




通圆® 7:44 


Android Love 

Hello World, AndroldLove! 



TV^cv bo 七七伽 . 


PM 


Both have text ih 
"the body, but youv 
app、-text (the 
hello wo\rld s-fcu-p-f) 
do«h;i ma-tdh the 
sketdk 


But how do you 
change the string 
displaying in the app? 


0 






\ dreamed an phone 
open source and hacKable 
Android. 乓 or -the uoini 




Start by looking at the layout 

There is an XML layout that was generated by the 
wizard. This is what control the visual display of 
your app. Let’s take a look at the layout and locate 
where the string is being set. 
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screen layouts 


Locate the layout 

Android layouts are defined in XML There was one 
layout created for you by the wizard called main . 
xml. Navigate to / res/layout/main . xml in the 
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your first app 


View the layout 

When you double click main . xml and open it, you’ll 
this new pane opened up in Eclipse. 


java - AndroidLove / res / layoyt/mairi.xinl - Eclipse SDK - / MyWork/ work/ head~fj rst-android/book-test 


j rh 硭暄 - 


1 ] ©▼ © 6 鉍 j S j 铛 g j 勢 - O, j 谔破 j 念 © # 




ava 


j T {f 1 T ^ <]D T C[> T 


tS Package Ex pi K3 || Hierarchy 口 0 

id maini.xml £3 


a □ 

B 驾 v 

Editing config: default 

Any locale 

t : t Android 3.0 t ! Create … 

▼ l^And roidLove 
▼ 0src 

f 3.7in WVCA (Nex... ^ 1 f Pm". i]|f No... 

i] [ E>a... i][ 

J L J L 

Theme t " 


▼田 com. he adfi rs llabs „an dro id. love 
► [T] HaikuDi splay java 

► ^geri (Generated Java Files] 

► ^Android 2,33 
[^assets 

▼ [^res 

► &drawable-hdpi 

► &drawable-ldpi 

► & drawable-mdpi 
▼ (^layout 


圄 Palette 


& Form Widgets 


Teiciviev. Large 
Medium sh- : | 

■■■ v 1 " CheckeoK 


Check^dTcKiView 




AndroidLove 

Hello World H-aiNuDispIfyi 



The rwaih.Xrwl -pile 
ofCh ih Ellipse- 



default, pro parties 
该 proguiard.cfg 


Cj Images & Media 
Cj Time ； & Date 
Cj Transitions 


Cll Advanced 


Custom ...ry Views 


]Graphical Layout ^ mairii-xml 


mairLxml - Android Love/res/layout 


Android 5DK Content Loader 


C Sign in to Google., 


I was expecting to 
see the raw XML, since 
this is an XML file. 
What is this? 


This is a graphical editor provided by the ADT 

Many of the files used to build your Android apps are XML 
based. The ADT Eclipse plugin includes graphical editors for 
these files that help you edit them. 

Now that you’ve seen the visual representation of the XML 
layout, you can also view the raw XML that the editor is 
displaying... 
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whafs in a layout 


The layout XML 


The graphical editors are just a facade over 
the XML underneath. So don’t worry, if you 
want feel all super-coder, you can always jump 
in edit the XML source. Or you can use the 
graphical editors, or a mix of both! 


o o o 

Java 

- AndroidLove/res/layout/main.xml - Eclipse SDK - /MyWork/work/head-first-android/book-test 

] H o 

a 0 ] 


❽， •会鉍 j 3 j j 帑 ▼ o, . 

^ <>▼ o- 

遵破该 ，j 念迫 e ^ J java 



▼ t^And roidLove 
▼ ®src 


▼田 com.headfirstlabs.android.love 
► HaikuDisplay.java 

► ^Jgen [Generated Java Files] 

► Android 2.3.3 
色 assets 

▼ &res 

► (^drawable-hdpi 

► ^drawable-ldpi 

► (^drawable-mdpi 
▼& layout 

x main.xml 

► Rvalues 

[cf AndroidManifest.xml 
_ default-properties 
资 proguard.cfg 


<LmearLayout xmlns:android« ,f http://schemas. android. com/apk/res/androicT 
android:orientation- ,f vertical n 
android:layout_width- "fill^parent n 
android:layout_height* "fill_parent n 

<TextView 

android:layout.width- "fill^parent n 
android: layout_height- ^wrap^content' 9 
android:text- '^string/helh 

/> 

</LinearLayout> 



?=? xml 

j @ 區曰 


Clitk "the mdmociml -tcib ov\ "the 
boi-fcorw -to view ihc )</!/!L. 


t^eretcire no o 

Dumb Questions 


Can I edit the XML text here, or do I have to use the 
graphic editor. 

The graphical editor just graphically displayed the contents of 
the XML text file. If you update the XML code, Android will keep the 
graphical editor in sync. 


Can I use both the graphical editor and the text editor, or 
do I have to choose? 

Sure you can use both! If you make changes in the graphical 
editor and switch to the text view, you'll see your changes. 

Likewise, if you make changes in the text and switch to the 
graphical view, you’ll see your changes there too! So' switch back 
and forth as much as you like! 
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your first app 


A closer look at the layout XML 


Android XML layouts consist of a number 
of user interface components called Views, 
and layout managers called View Groups. 
The generated main . xml layout has one 
ViewGroup with a single View inside it. 


The 

layou-t ></V]L code 



<?xml version="1.0" encoding= M utf-8"?> 

<LinearLayout 

xmlns : android= M http :// schemas.android.com/apk/res/android' 
android : orientation="vertical" 
android : layout_width="fill_parent" 
android:layout height= M fill parent" 


The View msidc 
layout is a a 

\/*icy/ 

■to display 




main.xml 


The \/icw^v-oup, \ y \ -this 
匕 dse d L'mc3v*Layou't 

•fills 七 he sdv-cch. 


Since the TextView is displaying text, the String must 
be set in there somehow. Let’s take a closer look... 
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resource values 


Take a closer look at the TextView 


Android Views are declared in XML layouts 


along with a number of attributes to configure 


them. Let’s take a look at the generated 
TextView from the layout and look at it’s 
properties. 


The Tcxtl/icw 
dcdblrd'tioh 


<TextView 

android:layout_width="fill_parent 
android:layout—height= n wrap—content 

android : text= n @string/hello▼▼ 




"These y(/\Z\L- piropcirtics 
dc-fihC the width 3hd 
height o-p the view. 

This atbribute sc*ts 

ov\ vicy/. 



Hold on, not so fast! The property seems 
to be setting the TextView^ text to、、@ 
string/hello /, but the app says ''Hello 
World, HaikuDisplay! ,/ . What gives? 


Android loves resource properties 

It’s a good practice to move details of your user interface 
to property files. Developers have long since done this with 
text strings in their apps to spell check easier or prepare for 
internationalization. Similar needs hold true for colors, font 
sizes, image names and more! 

The “@string/hello” isn’t the string itself, but rather a 
pointer into a String property file. 

Now look at the property files and locate 
the String definition. 
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your first app 


Android value files 

Right below layouts in the res folder is a folder called 
values. This folder contains the Android resource value 
files for your app. Open the folder and you’ll see a single 
file named strings . xml. Double click strings . xml 
to open it. 


res 


drawable- 

hdpi 


drawable- 

mdpi 



layouts 


Layout -Piles 
ih hcv-c 



this! 


Navigate to the strings 
xml file in the Eclipse 
package explorer. Double 
click on the file to open it. 
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string values 


Open the striwgs.xml file 


Opening the strings . xml file will display another 
Android graphical editor in the main Eclipse pane. 
This editor is similar to the graphical layout editor, 
except that it display Android resources. 


The S'tv'm^S.'^irwl -file 
opened ml Ellipse. 


|-f you 

already ， 

{p -biic v-cs/values/ 

i\\t Edifse fatkajc 
c%plovcv" Poublc 
c\\cV ov\ tV^c -f ile t> 

ofCr\. 


夂广 ^ Java - android-love/res/values/strings.xml - Eclipse SDK - /Volumes/MyData/work/head-first - android/workspac^ 

J rt ， y 齒 ]n j 啓 W ^ j 铃 ▼ O, <4, ] 虑破 GN ] 含 o 彳 

B Package Explo S3 Hierarchy 




Gee| 


Just another graphical editor 

This is just another Android 
graphical XML editor. Click on the 
tab on the bottom right to view the 
raw XML if you want. This works 
with all XML file graphical editors. 


a main-xml ■:] swings.xml £3 



The v*aw ^(A/IL. sliov/ih^ 

value s-tv-'mgs v-csouv-dcs. 


<?xml versi on= li l . & " encodi nci= 

<resources> 

<string nanie= "hel io'VHello World ± IHaikuDispl-ay 1 <ystnng> 
<string name- "opp_name ">A ndro i dLove </ s t r i ng> 

</resources> 


Clidk *tV>c s*bri 呼 . 

%ml *tab *bo VICV/ 

iht )(ML. 
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your first app 


Look at the values 

You can edit any of the values by select an item 
from the list on the left of the pane. Once you 
select an item, a second panel will display showing 
the name and the value for that item. 



this! > 


Select the first element 
labeled "hello”from the list. 


Java 

- AndroidLove/res/values/strings.xml 

- Eclipse SDK - 

/MyWork/work/head-first-android/book-test 

▼ ▼ p C 3 , o 

▼ 

❾， .6 鉍 jg j 

- ^ - N ^ - 

啓 jS 1 鼸] 

令 • O. 

❺敏逆 ▼ 

& CS 趙 % J Java 



B % 

r t^AndroidLove 
▼ Q^src 

▼ [Q com.hcadfirstlabs.android.love 
► [7] HaikuDisplay.java 

► ^5 gen [Generated Java Files) 

► Android 2.3.3 
匕 assets 

▼么 res 

► ^drawable-hdpi 

► ^drawable-ldpi 

► ^ drawable-mdpi 

▼ & layout 

main.xml 
r 色 values 

0 strings.xml 


W Android Resources (default) 

⑤ ©◎◎[!] ① SCDAz 


Attributes for hello (String) 

Strings, with optional simple formatting, can 
be stored and retrieved as resources. You can 
add formatting to your string by using three 
standard HTML tags: b. i. and u. If you use an 
apostrophe or a quote in your string, you must 


Out selected, a now 

displays you 

6 a 朽 cd*i*b "bV^c 於 ame and 

value the item ， 



Thc\rc is the hello 
woirld stma displayihg 
•m the appf 





Now that you see where the string is located, where can you edit it? Can 
you edit the string in the graphical editor? In the raw XML? 
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editing string values 


Edit the string 

With a resource selected from the Resource Elements 
list, the name and value are editable on the right panel 
(In this case labeled “Attributes for hello (String)”. Edit 
the “hello” Resource Element’s value to the haiku. 



TV^c a*b*bv-'ibu*tc 
dy\d value have 
editable -fields. 

will update value 
•m you\r dff. 



w 


Edit the Value of the hello Resource Attribute with 
the following text、' I dreamed of a phone\ 
nOpen source and hackable\nAndroid 
for the win !〃.（The \n’s make new lines so 
the haiku will display on three lines.) 



Remember to 
save your files. 

When you edit 
an XML file 
in an Android 


graphical editor，it generates 
the underlying XML. But that 
underlying XML is just like 
any other kind of text file to 
Eclipse and has to be saved 
after editing. After you make 
changes in a graphical editor, 
make sure to save before you 
run. 
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your first app 



Tesr DriVq 


With the “hello” Resource Element updated with the poem, run 
the app again and make sure it shows your changes. 


{\\t Ka'iku 一 

d'»s\>laY »^5 
•m a??! 


5554:standard 


11：08 



AndroidLov( 

I dreamed of a phone 
Open source and hackable 
Android for the win! 


O ❻❿ ® 





Tl~irr ^■kjr 


D 1 99B99B9BO 

■■9B 圍 DHHD1II 週 




Great ]ol>! Tke kaiku is displaying in your app. 
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android toolbox 


You're off to a great start! 


You built your first app using the tools Google provides to 
help you get started quickly. Your development environment 
is up and running with Eclipse, the ADT plugin, and SDK 
configured to use an up-to-date Android version. And you 
modified the basic generated app to make it your own. 

Stay tuned for a new feature that Pajama Death want toadd 
to the app... 


0 


After seeing this 
weve got some more 
ideas. We hope you can 
help us out! 


Great work, Now we have 
an awesome way for our 
fans to see the lyrics to our 
favorite song! 




.1 
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your first app 



Your Android Toolbox 

Now that you built your first 
Android app, you’re starting to 
build your toolbox of Android 
skills! 


|y\stalldt'Or\ O^ttV UlS 七 

9 \M u\^t YOU do/t Kave \i 
mstallcd abreadY). 

^ Ustall h^o\d SP^. 

魯 Ustall APT U\^t PI 十， 

魯 Install ?a_ s . 

• Co^^urc APT- 

• Build your av/csomc h^dro\A 


Coh-tch-ts 




=r h layouts ahd 代 $ 。吻 ㈣ 叱“ 


souv-dc 


崎 P k ^avio^ (dc^cd ih Java 

todt) 


" 巧 ， ^ Oikc images a,d Ub) 

eluded di^ly i h ihc pv-ojcdt 
Coh-figu\ratioh -files Cosily 






BULLET POINTS 


■ 


■ 


■ 


■ 


■ 


■ 


■ 


Get your Eclipse-based Android 
development environment up and running!. 

It’s a good idea to add the SDK directory to 
your path (while you’re in a configuration 
mindset) so you can easily run Android 
tools later from the command line. 

Setup an emulator configuration for you 
target Android version. And don’t limit 
yourself: feel free to setup a bunch of them! 

Create new Android projects using the 
Eclipse “New Android Project” Wizard. 

From there, modify the generated app to 
make it your own. 

Layouts are defined in XML and you can 
find them in / res/layouts. 

Values (like strings) are defined in Android 
Resource XML files. They can e found in / 

res/values. 

When you open an Android XML file in 
Eclipse, you'll see a graphical editor to help 
you modify these files. If you want to view 
or edit the raw XML text, click on the right 
tab on the bottom of the editor. 

You can go back and forth editing XML 
files in the graphical editor or text. Just 
remember to save your files when you use 
the graphic editor! 
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2 g!Ve your app an action 


,Adding behavior , 



Apps are interactive! When it comes to apps ， it’s what your users can do with 
your apps that make them love ‘em. As you saw in Chapter 1, Android really separates 
out the visual definition of your apps (remember all that XML layout and String resource 
work you just did!) from the behavior that’s defined in Java code. In this chapter, you’re 
going to add some behavior to the An droid Love haiku app. And in the process you’ll 
learn how the XML resources and Java work seamlessly together to give you a great way 
to build your Android apps! 


this is a new chapter 












adding behavior 


Make your app mteractiyg 



Yeah, we want it to do 
something! I*m thinking 
we hide the haiku and add 
a button our fans have to 
push to show it! Let me 
sketch it out... 


We want the app to 
rock! But right now it 
just displays the haiku. 


Uf s see what Pajama Pcath have w wind 
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working with feeds 


— — — — — — — — — — — — — — — — — — —-l 

THE PAJAMA DEATH APP UPDATE WITH AN ACTION BIJIION , 

Pajama Death sketched out what they were thinking so you could build it. They added a button on top of the haiku, 
and hide the haiku on launch. Then when you push the button the haiku shows up! | 


f[dd a bu*b*tor\ {p 

■bV^c Aow 

V^a'ikiA y 


Wide -the 

h^iku v/liCh 
■the ap loads. 



AndroidLove 





SKov/ some A^dv-oid love/ 


I dreamed of a phone 
Open Source and Hackable 
Android for tlhe wEn! 


▼ 




If you’re thinking this looks great, but you 
have no idea where to start... turn the page! 
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the plan 


Here's how youVe going to do it 

You’ve got some work to do. So let’s break it down into a few 
steps. First off, you’ll be starting with the AndroidLove 
app project form Chapter 1, and making a few 
modifications to it. 

Open the Android Love project now if you don’t still 
have it open from Chapter 1. 


Da this! 


Open the AndroidLove 
project from Chapter 
1 if you don’t already 
have it open. 



Android Love 


I dreamed of a phone 
Open source and hackable 
Android for the win! 


The A^dv-oidLovc 

3s you Ic-ft i"t 
at the cv\d of the 

Iasi 


1. Add the button 


You’re going to add a new button to your app’s screen. 
Eventually, this button will show the haiku, but not 
in this first step. This is the first time you’ll be adding 
a brand new component to a screen and you’ll learn 
what components are available and how to add them 
to your app screens. 


TKc 

butbew. 



I dreamed of a phone 
Open Source and Hackable 
Android for the win! 


44 


Chapter 2 









working with feeds 


Z Hide the haiku text 

After adding the button, you’re going to hide the 
haiku text. The button still won’t do anything and 
you won’t see the haiku text at all, but hey, you’re 
making progress! Here you’re going to learn about 
the different attributes you can set on your widgets 
from XML. 



The text 
,s hiddeh. 


3. Make the button show the haiku 

Next, you’re going to wire up the button 
to show the haiku. This is going to be your 
first taste of Java coding as you connect 
the Java behavior to the XML screens. 

This is where the magic happens! 



T\\t Wtbcm 
ac.*bioy\ 七七 





You’ve got your project open and you’re ready to start working on this 
new action. The first step is adding the button. Which file do you need to 
open to add the button? 
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a new button 


Add the buttow 


You worked with the main . xml layout file in Chapter 
1 that defines the entire layout for your app’s screen. 
This is where you’re going to add the new button to 
your app. Open main . xml by by double clicking on it. 
You can find it under / res / layout/main . xml. 

In Chapter 1, you edited the XML layout in the raw 
XML source. Now you’re going to add a component 
using the graphical editor. Click on the ‘Graphical 
Layout’ tab to view the layout in the graphical editor 
if it isn’t already showing. Notice all of the Views in 
the list on the left side of the screen. 



Open main . xml now. You 
can find it under / res/ 
layout/main.xml. 




Tiicsc arc all o-f 

Views available -to 
you m A^dv*oid- 




[Oj main.xml S3 


D q )\ 

- 1 开 

Editing config: default 

LddL 10 叫: dP 

_ 口^: 

□— 

3.2in HVCA sli... % Portrait % A. ； N. ： D. t Theme 

t j 1 Create... | 


-=Views =- 
© CestureOverlayView 
(D SurfaceView 
(§) View 
(2) ViewStub 
⑯ WebView 
(J) AnalogClock 
(J) AutoCompleteTextView 
(g) Button 
© CheckBox 
© CheckedTextView 
(£) Chronometer 
⑫ DatePicker 
© DigitalClock 
0 EditText 
⑥ Gallery 
① ImageButton 
① ImageView 

⑭ MultiAutoCompleteTextView 
(f) ProgressBar 
(Q) QuickContactBadge 
RadioButton 



Graphical Layout main.xml 


s 6^ 隐曰 Q 'w 1 w ^ 
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You can add views to your screen hy ctraggingf 
tkem Ironi tke list onto your screen. 
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A 拙 ng a Vie，Up Cl^se 


Let’s take a closer look at adding the button using the Graphical 
Layout editor. 


o 


Click on the button on the left panel and drag it to the top of the 
graphical layout. You’ll notice an dotted line display where the button is 
going render. Make sure it goes at the top. 


la *main.xml 23 
Editing config: default 


I 3.2in HVCAsli... T) [ Portrait i ) [ A... t) [ N.. T) [ D.. ?)|[ The 


me 


l-l 

-1 

100 % 


0 


Clidk oh the 

But-fcoh ahd 

the XOp OT 、④ AutoCompI 

the layout. P® Button 〆 

* © CheckBox 


Views =*- 

© Gesture Over I ay View 
(f) SurfaceView 
% View 
(§) ViewStub 
⑩ WebView 

gClock 






ieRf a phone 
Sour 4 +and Hackable 
roid for the win! 



Pvaj butto 灼 all 

七 he >way bo *tof 

av\A you’ll sec 扣 

dotted I me >whcv*c 
bu*t*to 灼 be added- 


After you add the button it’ll look like this. 


bu*t*bo^ you I 
\us 七 added- 


@+id/Button01 



I dreamed of a phone 
Open Source and Hackable 
Android for the win! 


❺ 


Now click back to the main . xml showing the XML. You’ll the first 
View defined in the file is the Button you just added! 




a 


[ 

3 □ 




c?xml version- "l, e ： ncoding- r, utf-8"?> 

■^LinearLayout xmlns:android« "http : //schemas, android, com/apk/res/android " 
■android::orientation_ r, vertical" 

■android: l-ayout_width- "fi ll_parerit" 

■android' layout.height-- "fi ll_parent "> 


The added ><ML 
dctlav-a*t*ioir> *to 
dveate 七 he Button 

> 

< Button android : text- "§+id/8utton&l ™ 

■android: id- "§>+id/Sutton01 " 

■android: layout_width- ,, wrap_ con ten t" 
■android: l-ayout_height •- w wrap_conten_t " /> 






^TextView android: text- tr i ng/haiku r, 
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button text 


Fix the buttow text 

It’s great that the button is on the screen now，but not so great 
that the button text is showing up as “@+id/Button01”. Let’s 
see about changing that. 

Why is the button text showing up like this? 

To get to the bottom of this, compare the View XML 
declarations of the TextView displaying the hauki and 
the Button you just added. Focus on the text properties of 
each View. 

The haiku TextView android : text property is 
referring to the haiku string property in strings . xml. 



Wcvc s -the but-fcoh wi-fcli the 
wei\rd 。 bu-fc-fcoh text skowiha 
up as 沒 +id/ButfcohO 广 


@+id/Button01 


I dreamed of a phone 
Open Source and Hackable 
Android for the win! 




(/ 


The li^iku Tcxtl/icw 
dcdl3\r3"tioh -p\rorh 
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strings.xml 





























working with feeds 


Now look at the Puttow definition 


The Button definition’s android : text attribute 
value doesn’t have the u @ string / 55 prefix. It just has 
“@ + id/ButtonO 1” as it’s value. 




The Buttoh 
I dcdlav-a-tioh. 


(- 


<Button android : text= 〃 @+id/Button01 〃 
android:id= 〃 @+id/Button01 〃 


The ahd\roid:twt 
3 七 "bribu 七 e is vc-Pcv"\rihA 
h> But-fcohO/. 



android : layout— width=〃wrap 一 content" 
android:layout_height= 〃 wrap—content" 


/> 



main.xml 


Wait a second! There 
is no ButtonOl string 
property in strings.xml. 
What gives? 


The answer lies in the prefix... 

The value for the android : text 
property in the TextView is referring 
to a String resource in strings . xml. 

But there is no string resource for 
the Button! 


Tiicv-c av-c sVmJ 

-fov 扣 d 

but v\oi\\\^ (or w But*to^Or ， 
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referencing strings 


The ©string prefix 

Take another look at the haiku TextView text attribute 
and you’ll see it has a special prefix “@string/”. That 
special prefix tells the view rendering code to look into the 
strings . xml file for a string property. And even though 
the Button has a prefix before ButtonOl ， it’s not the 
special “@string/” prefix so it doesn’t work. 


Using the ©string prefix 




<TextView 

android : text:’’@string/haiku’’ | 

_• 1 




NOT using the ©string prefix 


<Button android : text =〃 @+id/ButtonO1 〃 

- _ 

丁 he Button docs^ ； -t have -the 
special J>\rc-Pix. 


tJiereicire no ^ 

Dumb Questions 


If the Button is missing the @ 
string prefix, how is it displaying 
any text at all? 

If the Android view rendering code 
doesn’t detect the @ string prefix to look 
up a key in the strings • xml file, it 
renders the value in the android ： text 
directly. 


Is that why the button says 
:f @+id/Button01” because 
it’s rendering directly from the 
android: text property? 

Exactly. 


Hey cool! So why are we messing 
with strings.xml file at all? Couldn’t I 
just put all of my strings directly in the 
layouts and call it a day? 

Technically, yes. But it’s not the best 
idea. The string resource element was 
designed to remove string constants from 
your layouts. It’s a good idea to keep them 
separate, and Android is setup to handle 
this out of the box. 
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Add a string resource for the button 

The fix for this is going to include two changes. You’ll 
need to add a new string property in strings . xml, 
and then you’ll need to update the Button definition 
in main. xml. 

Let’s start by adding the new string resource. Open 
strings . xml and click on the strings . xml. 

This is where you’re to add the new String property 
and you’ll do it directly in XML! 

Here is the format. 

S*ta\rt 

y/i 七 TiVis is so 


you’ll use "to \rc-fc\rchdc this 
I \y\ youv* layout- 

<string name= n haiku n >1 dreamed of a phone \nOpen Source 
and Hackable \nAndroid for the win!</string> 

- - - 

TKc value "is *tV>c 
a^ual you 

v/avrt *to display. 




it cl hilrwc ； -that ； s what 



Below is the the contents of the strings.xml file. Add a new String property called 
“love_button_text” and give it a value of “Show me some Android love!” 


<?xml version= M 1.0" encoding= M utf-8"?> 

<resources> 

<string name= n haiku n >I dreamed of a phone\nOpen Source 
and Hackable\nAndroid for the win!</string> 

〈string name="app_name">AndroidLove< / string 〉 


</resources 〉 


^ Add 七 he r>cv/ p^ropc^rty 


you are here ► 
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using the string resource 



Below is the the contents of the strings.xml file. You should have added a new String property 
called “love_button_text” and given it a value of “Show me some Android love!” 


<?xml version^"1.0" encodings M utf-8"?> 

<resources> 

<string name=' ， haiku n >I dreamed of a phone\nOpen Source 
and Hackable\nAndroid for the win!</string> 

〈string name="app_name">AndroidLove</string 〉 


^ <s*brihjj y\^ mIm t some Android lovc^</ 

^ V f\t\A value is se 七 

■{jo w £iioy/ sor^c 
f[v\Ayo\d lovcf 


The elerweivt is a 

</resources> 


The dcr^c^-t has a 

灼 arwe a-ttv-ibutc o ( 

u lovc button 七以七 ”. 


Now you just need to use it! 

You just added the String resource for love—button—text. Now 
it’s time to plug it into the Button declaration in main . xml to set 
the text. 
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^harpen your pencil 


Below is the main . xml layout. Now that you have the love_ 
button_text property, use it in the Button definition to set the 
text form the strings . xml resources. 


<?xml version= n 1•0 n encoding="utf-8"?> 

<LinearLayout 

xmlns : android="http :// schemas.android.com/apk/res/android" 
android: orientation= TT vertical" 
android: layout width="fill parent ff 
android: layout height^ 1 'fill parent n > 

<Button android : id="@ + id/ButtonO 1 ▼▼ 

android: layout width="wrap content ff 
android: layout—height= n wrap content fT 
android:text =〃 

/> 冬 

<TextView android : text= n @string/haiku" 
android: id=" @ + id/haikuTextView Tf 
android: layout width="fill parent ff 
android: layout—height= n wrap content Tf / > 

</LinearLayout> 


Use w @s*brmy^ 
pvc-fi% plus 
vcsouvtc heve 
*bo liavc Button 

vesouv^c you jus*t added- 
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testing the new string 



Below is the main . xml layout. Now that you have the love_ 
button_text property, you should have used it in the Button 
definition to set the text form the strings . xml resources. 


<?xml version^' 1 1.0" encoding= n utf-8 n ?> 

<LinearLayout 

xmlns : android="http :// schemas.android.com/apk/res/android" 
android : orientation= ff vertical" 
android : layout—width= n fill parent TT 
android : layout—height= n fill parent n > 

<Button 

android : id="@ + id/ButtonO 1 ▼▼ 

android : layout—width="wrap content▼▼ 

android: layout height= n wrap content fT 




android : text =〃 




S-tv'mJ vcsouvdc *to use. 


<TextView android : text="@string/haiku" 
android : id=" @ + id/haikuTextView T, 
android : layout—width= n fill parent TT 
android: layout—height= n wrap content 11 / > 
</LinearLayout> 
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Tost DriVq 


Whew! You added the Button, which had some weird text. And to fix 
that, you added a new String resource, and used that new String resource 
from the Button's android : text attribute. Let’s see if it all worked! 
Run the app again... 


丁 he button is displayed 
with the text 

•(Vom the St\rihg v-csouv-dc 


- 9:08 


AndroidLove 



I dreamed of a phone 
Open Source and Hackable 
Android for the win! 


And it works! The button looks good! 





you 


are here ► 
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hiding text 


Hide the haiku text 


Now that the Button is added and looking good, it’s time 
to move on to the next step: hiding the haiku text. 

How are you going to do this? 

Well, two strategies are probably coming into your head 
right now. You could remove the Text View and it back 
once the button is pushed or you could set the text to be 
invisible and make it visible once a user presses the button. 

Uf s go with the invisible text option! 

OK, but that’s not a huge help, right? You need to know 
how to hide text. This is something new that you haven’t 
done yet and you need to know where to find out about 
new things in Android. Luckily, Android comes with great 
online documentation for just this reason! You can view is 
at developer . android. com/reference. 




AndroidLove 


■ Show me some Android love[ 





Home 


SDK 


Dev Guide 




Resources 


Videos 


Blog 


Uf 


Padcage index | Class index 
android 

andmirl arrfi^iNlitysprvir^ 
android .accounts 
Andmirl nnimAtir>n 

android.app 
android app admin 
android .<ipp .backup 
android appwidoct 
android .bluetooth 
android .content 
android mntfint pm 
android conteotres 

andmid riAtAha<u^ 


c 


Snivel <i p<ickiiy« lu vi^w ils 
memoers 


Package Index 


I heae are the Android ATMs. 


android 

CcNiUiiriB retiource ut»<»d by applieslioriii included in U»e 

platform and dctlocs applicotion permissions for sysicm features. 


android .acccssibilityscrvicc 



android .accounts 



android animation 

These classes provide functionality for the property animation system, 
which allows you lu animdto object prup«rti«(» of any (ypu. 


android .app 

Contains hkjn-level ciasses encapsulating mo overall Android 
applicotion model. 


android .app.adiTMn 

Provides device admimsiration features at the sysicm level, allowing 
you to create security-aware applications that are useful in enterprise 
^fittings, in which IT prnfR^ion^ls r^qiiirift rirh mntml ovftr ftmployftft 
devices. 



For infhfmAtinn. 翅 《 户 Ihft HftvirA Adminifttr«1irtn dftvftlop^r Quid^ 


android App haridip 

Crw>biinft thA hArknp unrl mnlnm funriinnnlity AvailnhlA tn applirjitiAn^ 

If a user wipes the data on their device or upgrades to a new Android* 
powered device, dll applicaliomi Ihuil haw endbled backup can rusloru 
the users previous data when inc applicotion is rcinscaltod. 



For more infbemabon, see the Data Backup developer guide. 


android .appwid^t 

CcNiUiins Um? components oecessiiry b cttfaU* *<ipp widgets*, which 
users can emoed in otn«r applicaoons (&uch as cne home screon)to 



quickly access application data and services without launching a new 
activity. 




Go to the online 
Android documentation 
now at developer. 
android.com/ 
reference. 


56 Chapter 2 































working with feeds 



Dacutnentatian j^avigatian Up Cl^se 


Let’s take a quick look around the Android online documentation 
to get acquainted. You can navigate to what you’re looking for by 
either selecting the package and class name, or searching for a class 
name in the search box on the top right. Now since you’re looking 
to update an attribute on the Text View, you need to look at the 
Text View documentation. 


you or\ 3 dlass ov* 3 
*tV>c mam v/ill slioy/ 
dc*tciiU -fov y/hd't you^vc sclcd*tcd- 


l-p you \ cy\oyi -the dlass youVc 
look'm^ for, bu 七 i^o\m 七 
you tyyc i*t m heve *to scav-dii 
ihc dodumcr>*tatiov>. 


This area lists all 
o-f *tV>c padkes *m 

*tv>c dotumCir>*t3*tio^. 

cr.dk on ov\t *to 

v'ic>w 七 he 

dodumCir>*tatioir>. 

\ y \ *tK*is dasc, 
a^dv-oidWid^ct 
^adka^e is sclcdicd- 


0 

Ot\tt a 

is selected, -this 
sc^tioh will show 

all o( the classes 
•… that pa^ka^e. 

|h this tSst, the 

Tcxtl/icw is selected. 
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android online docs 


Prowsc the XML attributes 

As you browse the documentation for Text View ， 
you’ll notice it has a number of Java methods, but 
it also has XML attributes listed. That’s because 
internally, Text View is a complete Java class. 
Since you’re working with the main . xml layout 
definition in XML, focus on the XML attributes. 


Does any look interesting? You’re looking 
for something that can hide the text... 


Text View I Android Develoi X 

O © developer.android.com/reference/android/widget/TextView.html 


GOD^OO 


android.view.accessibility 

android.view.animation 

android.view.inputmethod 

android.webkit 


dalvik.bytecode 

dalvik.system 

java.awt.font 

java.beans 

java.io 

java.lang 

java.lang.annotation 

java.lang.ref 

java.lang.reflect 


This looks perfect! 



It says it can control the “visibility of a view.” That’s 
exactly what you want! Using this you can make the 
entire Text View invisible when the app starts up. 

So how does it work? 
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View XML attribute details 

If you click on any attribute, you’ll be taken to a 
section that details the usage of that attribute. Click 
on android : visibility, you’ll be taken to the 
detail section on it’s usage. 

Clitk licvc bo vicy/ 
usa^e details -fov 
a^dvoid^isikili-by- 






android:translationX 

setT ranslationX(float) 

\ 

android:translationY 

setTranslationY(float) 


* android:visibility 

setVisibility(int) 




Constants_\_ 


ClVicw I Android Developers x 
G ti _ developer.android.com/referenA/android/view/View.html#attr android:visibility 


龟 1 


3300 


developers 


Homo SDK 

android text.mettxxJ 
android.toxlstylo 
anaroi(3.iexLuiii 
android.util 

aneroid view.accessiDiliiy 

android .view.animation 

aodroid.viowjnputmothod 

aoaroid.weowt 

android .widget 

dalvik-bytcoodo 

daivtk.system 

jnvH hwI fnnl 

java.beans 

. "T> 


〔 Sc>rch 〕 


I HynutlnfliitHr 

Menulnflater 

MQtionbvQnt 


Dov Guido 


Resouroes 


Blog 


android:visibillty 

Controls the initial visibility of the view. 

Must bo one of tho following constant volucc. 


Conttant 

Value 

Description 

visible 

invinibl(3 

0 

1 

Visibk> on screen; the default valuo. 

Not displayed, but taken into account during layout (space is left for it). 

gone 

2 

Complotoly hidden, as if tho vi«w had not boon ack)«<j. 



Detailed usage ^o\r 
dhdlroid: visi bi Irty. 


This cuirrKSfxindK to th« ylcihHl HttrihutH rKscxin：H Kymbnl \M i 

Related Methods 

3etVisibility(int) 


This tells us the usage is like this: 


android : visibility 



This is hamc o-p the )(ML attv-ibutc, 
whidi rwatdhcs the vsBimt ih "the dofis. 


Attv-ibutc values avc 

=''invisible" 



Use mvisiblc s'mtc you 
bo Wide vicy/. 



you are here ► 
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making the text invisible 


Look ih the URL you 90 
to the ahd^roid-visibili-ty drbils 
ahd you'll see Vicw w i h ihc URL 
how •…如 d J “TextW . 、 


It looks like you went to 
the documentation for View 
when you clicked on the 
android：visibility attribute, 
detail link. What gives? 


0 



Cl View I Android Developers 
On i O developer.Android.com/ refer< nee/and roid/view/View.htm l#attr android：visibility 


☆ a d 


tnyli^h 


developers 


CScarch) 


Homo 


SDK 


Dov Guido 


Rosouroos 


Blog 


android text method 
android toxt stylo 
android cextucii 
android .uttl 


android vlewaccessiDility 
android .view.animation 
android .viow.inpotmothod 
android weDWt 
android .widget 
dalvik-bytcoodo 
dal 败 system 
jnvH hwI frint 
java beans 


android:visibility 

Controls the initial visibility of the view. 

Must bo ono of tlx> foUowirvg constant voluoc. 


S«>o •: API L*v«l 


Constant 

Value 

Description 

Visible on oorocn; Iho default valuo. 

Not displayed, but taken into account during layout (space is left for it). 

visible 

inviifiblts 

0 

1 

gone 

2 

Complotoly hickton, as if tho viow had not boon added. 


1 HyniillnfliitRr 


Menulnflater 


Motion bvent 


1 5 



This (uvrKSfxincIs tn IHh glnlKil HltritxilH rnscxircH xyrntxil vl »1bi 11 t.y 

Related Methods 

setVisibilityfint) 



View is a base class that other widgets inherit from 

The View. j ava class is a base class with several cross widget methods, 
attributes, and constants. And if you look at the headers for both 
Button and TextView, you’ll see that they both inherit from View. 
The Android docs include superclass methods descriptions along with 
the locally implemented methods (but if you look close you will see that 
the android : visibility attribute was located in a section called 
Inherited XML Attributes). 


60 Chapter 2 





































working with feeds 


^harpen your pencil 


Below is the main . xml layout code. Update this code with the 

android : visibility set to invisible. This will hide the 
Textview and with it the haiku text. 


<?xml version= M 1.0" encoding= M utf-8"?> 

<LinearLayout xmlns : android="http :// schemas.android.com/apk/res/android" 
android : orientation= M vertical" 
android : layout_width=’ ， fill—parent" 
android : layout_height= M fill_parent"> 

<Button android : text= M @string/love_button_text" 
android : id=" @+id/Button01 ▼’ 
android : layout_width= n wrap_content" 
android : layout_height= M wrap_content" / > 

<TextView android:text="@string/haiku" 
android : id="@+id/haikuTextView M 
android : layout_width="fill—parent" 
android : layout_height= M wrap_content" 



</LinearLayout> 


V Add *bKc 

a^dvoid ： visikili*bY 
attribute iicvc- 


you are here ► 
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testing the hidden text 


^harpen your pencil 
、公 Solution 


Below is the main . xml layout code. You should have updated 
this code with the android : visibility set to invisible. 

This should hide the TextView and with it the haiku text. 


<?xml version= M 1.0" encoding= M utf-8"?> 

〈LinearLayout xmlns : android="http :// schemas.android.com/apk/res/android" 
android : orientation= M vertical" 
android : layout_width="fill 一 parent，' 
android : layout_height= M fill_parent"> 

<Button android : text= M @string/love_button_text" 
android : id="@+id/Button01" 
android : layout_width= n wrap_content" 
android : layout_height= M wrap_content" / > 


<TextView android : text="@string/haiku" 
android : id="@+id/haikuTextView M 
android : layout—width="fill—parent" 
android : layout_height= M wrap_content" 


ahdv-oid ： visibility—^mvisible 


i) 



</LinearLayout> 


Hcv'C^s "tiic d^dv'oi d ： v isib 1 1 i*by 七 e 

sc 七 * to invisible* TKis should Kidc 
y/V^ole haiku 
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Tesr DriVq 


You’ve hidden the TextView with the haiku on it with the 
android : visibility attribute. Now run the app and 
make sure it worked! 


« ft 5:42 


AndroidLove 


*to 'mvisiblc^ 
\\\A the 七 e 此 


Show me some Android love! 


1 


The text is gone. Great job! 


Awesome! Youve got the 
button displaying AND the 
text is hidden. Now you 
just have to show the text 
when you press the button. 



Let’s get that button working! 


you are here ► 
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the onClick attribute 


Make the buttow show the haiku 

It’s time to start making that Button work! There is 
an attribute on the Button View for just this purpose 
called android : onClick. The value for the 
attribute is the name of the action you want to use. 


Let's use it wow! 

Add the android : onClick property to the 
Button definition in main . xml. Give is a value of 
onLoveButtonClicked to be descriptive of what 
the Button is supposed to do. 


The Bu-fc-toh ， 
dc-Pihi-tioh 



<Button android:text= 〃 @+id/Button01 〃 
android:id= 〃 @+id/Button01 〃 
android:layout—width= 〃 wrap_content 〃 
android:layout height=〃wrap content - 



/> 




onClick atbribu 七 e 

added *to 


main.xml 


Pom 七 m 3 *bo 
or\LovcBu*t*tov\C 


Clicked 




64 Chapter 2 














working with feeds 


II CV*\roV* like 

"this i-r you v*uh youv* 
app how ahd pws -the 
birttoh. This is bemuse 

ohLovcBu-t-tohCli^kcd 
ish ’ 七 dc-P'mcd yet. 


Wait a second! What is 
onLoveButtonClicked? Is it more XML 
code that youre going to define in 
main.xml, or somewhere else? 


Actually, it’s a Java method. 
It’s just not written yet... 

So far, you’ve updated the screen 
layout, added a new View to the screen, 
modified and added String resources. 
All of these changes control the way 
the app starts. But for the button action, 
you’ll be making a change that a user 
can initiate while the app is running¬ 
adding behavior to the app. And 
Android app behavior is defined in Java. 


5:40 L 


A Sorry! 


The application An droid Love 
(process com.hcadfirstlabs. 
android.love) has stopped 
unexpectedly. Please try again. 




So, let’s define onLoveButtonClicked now. 


you are here ► 


65 




java source 


Pefmmg onLovePuttonClicked 

So defining onLoveButtonClicked 
in the android : onClick property 
on the Button is calling some kind of 
Java method. But where is that method 
supposed to go? 

Let’s start by taking a look at the Java 
source code in your project and it’s contents. 



Only one Java source file created by the wizard? 
Let’s take a closer look at it... 
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working with feeds 


The AndroidLove Activity 

The AndroidLove class is a subclass of a built 
in Android class called Activity. Think of 
an Activity as the Java code that supports 
a screen. And in this case, AndroidLove is 
actually the Activity that supports your main 
screen you’re defining in main . xml. 

Double click on AndroidLove . j ava and 
Eclipse will automatically open it in a Java editor. 


TViC souv^C *fo\r 

A^dvo'idLovcjava 



public class AndroidLove extends Activity { 

{\Y\&Yo\ALo^t 

public void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 

setContentView(R.layout.main); 

' ' 

TVi*»s Co&t *»S settmj ^ 

•m on scc 

\)o\n "it wov-ks sooJ 



AndroidLove.java 



The button is expecting to call a method in this class. 


Since the AndroidLove Activity is 
setting the main . xml layout on the screen, 
the Android action code is going to look for the 
method defined in the android : onClick 
attribute here. The action code is going to look 
for a method in the following format. 


public void onLoveButtonClicked 

V Thc rwethod rteeds 
io rwatdh the value o-P 七 he 
a^dv-oid-o^Clitk aiiv-ibutc 


TV^c method \r\ccds *to "take o 灼 c 

av-^umcy\*b Tii'is is {}\c 

view -tV^a-b was disked. 



(View view ) 
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action method 


Add the action method 

Let’s add the onLoveVuttonClicked method to 
AndroidLove now. Once this is done, we can run 
the app and press the button and it shouldn’t break. 


public class AndroidLove extends Activity { 


public void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.main); 


or\Lovc\/u*t*to^Clitkcd 

ar\dv-oid ： or\Cli£-k Button 
atbribute. 




public void onLoveButtonClicked(View view) { 

//doesn’t do anything yet 


_ 


dUll foo{ I 


AndroidLove.java 



Tqst DriVQ 


Run the app now and press the button. It won’t perform 
any actions yet. But you also won’t see errors either. 
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Implementing the action method 

Great work so far! The Button has an action method 
configured in the android : onClick property 
(onLoveButtonClicked). The onLoveButtonClicked 
method has an empty implementation in the AndroidLove 
Activity which you’ve verified is being called since the app 
doesn’t crash. Whew! 

Now it’s time to implement the onLoveButtonClicked 
method and make it show the text! 


Implementing the action in the onLoveButtonClicked 
method really consists of two parts. First, you need to get a 
reference to the Text View and then you need to set the 
visibility property to true. Sounds simple enough, right? 

Cool! Let’s get started... 


public class AndroidLove extends Activity { 


public void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.main); 




public void onLoveButtonClicked 


TextView haikuTextView 

/ 



Alake a variable *feo \rc-Pcv*cr>c.c 
"the haiku 


Wait, how do you get a reference to the TextView? 


view) { 



7 





AndroidLove.java 
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bridging the java XML gap 


From XML to Java 


You’ve got a disconnect right now. Your screen Views 
(the Button and the TextView displaying the haiku 
are defined in XML in the main . xml layout. But you 
action code is defined in Java in the AndroidLove 
Activity. How are you supposed to get references to 
XML defined Views from your Java code? 


)(ML drf mrtio 的 s. 


main.xml 



ttow do -they *talk 
■fco eadh o*thcv-? 



Java sou\rdc Code 



AndroidLove.java 

The button’s 



The T file 


To solve this, Android generated a special called the 
‘R’ file. This is a file of constants that allow you to 
get Java references to the TextView you defined 
in main . xml In fact, you can get references to all 
kinds of in app resources you define! But remember 
the String resources you defined in XML? You can 
get references to those too. 



Open the R file now. You 
can find it under gen/ 
com/headfirstlabs/ 
androidlove/R.java 
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The R file consists of a number of public static final 
constants, each one referring to an XML resouce. The constants 
are grouped into interfaces according to XML resource type. 

Your R.java should look like this: 


T]ie 尽 file VayUp C^se 






public final class R { 

public static final class attr {} 
public static final class drawable 




Cohstahts 



V*C-fc\r\riha -fco 

public static final int icon=0x7f020000;)< 亂吧讀 . 


public static final class id { 

public static final int Button01=0x7f050000 

} 

public static final class layout { 

public static final int main=0x7f030000; 


public static final class string { 

public static final int app name=0x7f040001; 

public static final int haiku=0x7f040000; 

public static final int love button text=0x7f04 0002; 


Android provides a number of utility methods for using these 
constants. Take another look at the onCreate method 
from AndroidLove . j ava where the screen layout is set. 
set Con tent View takes an R. j ava constant which was 
generated from the main . xml layout. 


public void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState) 

setContentView(R.layout.main); 



sc 七 

is called Wrth 

R.laY。^ 七 . wam k 
set la” 七 

dc-f wam. 


AndroidLove.java 
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finding views 


fretting view references 


Setting the content view from the R file is nice and all, 
but what you really want to do is get a reference to the 
Text View! Well, Android provides another cool utility 
method called f indViewByld to do just that. The 
f indViewByld method is in the base class of Activity, so 
you can use it directly in the AndroidLove class since it’s 
a subclass of Activity. 


The f indViewByld method takes one parameter, the R 
constant for the View. But since the method is meant to be 
generic, it returns a View not one of the View subclasses 
(like Button, TextView, or any other View). It’s easy 
enough though, you just need to cast the result to the View 
you’re expecting. 

Let 5 s see how this works for retreiving a reference 


View R constants 
are in tke f icP 
interlace group 


to the button on screen. 


Make a *to 

s*tovc vrtuwd V\t^i 


Cast -the \rctuv-hcd \/icw -fco 
the appropriate l/icw dass 
you \rc lookih^ -Pov. 


Pass i\^t 

{p ^d\/\t^\A -to 
a vc*fcv-cv\6c *to oy\ 


—— 


Button button = (Button) findViewByld(R.id.ButtonOl 




public final class R { 

public static final class attr { } 
public static final class drawable { 

public static final int icon=0x7f020000; 

} 

public static final class id { 

public static final int Button01=0x7f050000; 

} 

public static final class layout { 

public static final int main=0x7f030000; 





R.java 
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ftive the tGxtvicw aw id 

Take another look at the id interface inside R. j ava . 
There is a constant for the Button but not for the 

TextView. Weird, huh? 

The issue here is that the R file constants for the Views 
are generated based on an android : id attribute in 
main. xml. 


<Button android: text =,, @string/love button 一 text” 


android:id= 〃 @+id/Button01 



android:layout_width=”wrap 一 content” 
android:layout—height= 〃 wrap 一 content" 


android:onClick= 〃 onLovebuttonClicked 〃 / > 


This a^dro'id-'id atbribu 七 e 
dorrbroU 七 he 灼 

dv-ca*tcd -Pov- -the 

R -Pile- 


<TextView android:text=”@string/haiku” 

android:layout_width=〃fill parent" 
android:layout 一 height= 〃 wrap 一 content" 
android:visibility=”invisible” / > 


ThevVs 内。 ar>dv*oid ： id 

7c%*t\/ic>w dc^lav-a*tior> so y\o 
R -Pile dohs*ta 灼七 is tvca*tcd- 




main.xml 


^harpen your pencil 


There’’s no android : id attribute defined in the TextView 
declaration in main. xml, so no R file constant get’s generated. 
Don’t worry though, you can just add one yourself! Below is the 
the TextView declaration in main . xml. Add an android : id 
attribute and give it a value of "haikuTextView” 


〈TextView android : text= 〃 @string/haiku 〃 

android:layout—width=”fill—parent” 
android:layout 一 height= 〃 wrap_content 〃 
android:visibility^”invisible” 
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java attributes 


Sharpen your pencil 

Solution 


There wasn’t an android : id attribute defined in the TextView 
declaration in main . xml, so no R file constant get’s generated. 
Below is the the TextView declaration in main . xml. You should 
have added an android : id attribute and given it a value of 
“haikuTextView” so an R file constant will getgenerated. 


<TextView android : text="@string/haiku 〃 

android:layout—width=”fill 一 parent” 
android:layout—height= 〃 wrap_content , 
android:visibility= 〃 invisible" 


/> 


Complcmcwtary Java methods 

Most of the properties you can set from XML can also be set 
from code. This is important since you need to make the haiku 
TextView visible from the v action in Java. Let’s take another look 
at the TextView documentation for android : visibility 
and look for the complementary Java method. 




android:translationX 

setTranslationX(float) I 

android:translationY 

setTranslationY(float) 

android:visibility 


\ 

Constants \ _| 


a^d\roid ： v*is*ib*il*rb7 

attvUc. 


/Vlcb^od dd“ s 
-fov- sc 七 


public void setVisIbllity (int visibility) 

Set the enabled state of this view. 

Related XML Attributes 

android:visibilitv 

Parameters 

visibility One of visible, invisible, or gone. 



The a\rc 七 he \/iew base dass, so 

you CBv\ refer -to 七 herw as \/icy/.\/|S|BLE, \/ic>w. 

IM/ISIBLE, and 
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Tire Complete Action Magnets 

You’ve got all the pieces you need to write the onLoveButtonClicked 
method now! Below is the code for the AndroidLove Activity, but the 
method is onLoveButtonClicked blank. The magnets below contain 
all of the code fragments you need to finish the method. Use the magnets 
to complete the implementation. 


public class AndroidLove extends Activity { 

public void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState); 
setContentView(R•layout•main) ; 


public void onLoveButtonClicked(View view) { 


tUss Fool I 

1««vB 

o 

AndroidLove.java 


textView. setVisibility ( 


TVis is a 

you pass ih-fco 
sctl/isibiiity -fco make 
the l/icw visible. 


TextView textView 


] 
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finishing the action 



Tke Complete Action Magnets Solution 


Below is the code for the AndroidLove Activity. The magnets 
below contain all of the code fragments you needed to finish the 
onLoveButtonClicked method. You should have used the magnets 
to complete the implementation. 


public class AndroidLove extends Activity { 


public void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState) ; 
setContentView(R•layout•main); 


R dons*ta^*t- 


public void onLoveButtonClicked (View view) { 



textView. setVisibility ( 


Tc%*t\/ic>w visibility 
*tv-uc so its displayed. 



AndroidLove.java 


Ufs rim it mow! 
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Tost DriVq 


Now that the onLoveButtonClicked method is complete, run the app and try it out. 



TV\c 七 e% 七 … as 
W 七 displaYcd 7 0U 

ticked Wtbw* 


You diet it! 

When you started the chapter, the 
AndroidLove app had no behavior, it 
didn’t do anything. But now you’ve 
made it do something! And to make 
that happen, you added a new view, 
created and used a new string resource 
for it’s text, built a button action in Java, 
and used the R file to help go back and 
forth between Java and XML. 


Great work! 



o 


That so totally rocks! 
You are developing 
some mad Android 
coding skills! 


That button 
just adds so 
much... action! 


o 









Your Adding behaviour 
Toolbox 

Now that you’ve completely 
implemented a button action, 
you can start adding behavior to all 
your apps! 



Makmj a hthoY\ 

^ Use o,Cli6k aU/.Wte_to 

declare adW 

, MW# 如七 ^s ? la Y s 

layout Vi 払七 ^ 

@ /\aa a method ^ a y.amc maUWnr^ 如 
oX\\cM a 七七▲长 va ' uC 
^ Make sure mctW takes m a si^lc 
\Acv/ 3s a ^aramc*tcv 


■ Use the graphical layout editor to make 
adding new Views easy. 

■ Add new String resources when you need 
them (and add them to Strings.xml). 

■ Use the “@string/” prefix in your XML layout 
to refer to String resources. 

■ Explore the online documentation for all 
of the attributes you can set in your XML 
layouts. 

■ If you know what you’re looking for but don’t 
know where to find it, use the documentation 
search 

■ Get references to Views on screen by calling 
f indviewByid and passing in that 
view's ID constant from the R file. 

■ Make sure your Views in your XML layout 
have android:id attributes set if you need to 
get references using f indviewByid. 

■ to use Use the android : onClick 

property on Button to add an action 
method. That action method will be called 
on the Activity that launched the screen, so 
make so to add the method. 

■ Remember all of the Java source is in the 
/sre folder. 
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Pictures from Space! ♦ 


Wait, let me get this straight. 
People put up RSS feeds on the 
Web and I can use them for my 
own apps? Every day is like my 
birthday on the Internet! 卜 


RSS feeds are everywhere! From weather and stock information to news and 
blogs, huge amounts of content are distributed in RSS feeds and just waiting to be used 
in your apps. In fact, the RSS feed publishers want you to use them! In this chapter, you’ll 
learn how to build your own app that incorporates content from a public RSS feed on 
the Web. Along the way, you’ll also learn a little more about layouts, permissions, and 
debugging. 


this is a new chapter 
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bobby loves space! 


Welcome to NASA 



of the Da 


Enter your address below to subscribe 


七 day site. 


X Ful Screen ► Slide Show 5 ： View Thumbnals ^ MA to MyNASA Imaoe Galery 


d NASA - Image of the the D 


MISSIONS MULTIMEDIA CONNECT ABOUT NASA 


NASA Home > Multimedia > NASA Images 


♦ Send ♦ Sh^re 


Multlmpdia 


I really wanted a telescope, but 
all I can find are these binoculars. 
Since I can’t see space, I've been 
checking out the NASA image of 
the day web site instead. It's got 
a cool new picture of something 
about space every day! 


> Log In To MyNASA | > Sign Up 


Image of the Day Gallery 


▼ Images 


► Videos 




► NASA TV 


Interactive Featurei 


3D Resources 




Blogs 


Thp Triangulum C^lAxy k larjitpd 
nearly 3 million light years from 
Earth. And，in a study that pushes 
Ltie lirnilb urubservdliuiib currently 
possible from harth.a learn ot NASA 
and European scientists recorded 
the "fingerprints" of mystery 
molecules in the Triangulum 
Galaxy, as well as the Andromeda 
Galaxy. 


Figuring out exactly wnicn 
molecules are leaving these dues, 
known as "diffuse interstellar bands* ▼ 


[>ownload Image 

• Ful SizQ » 1024x768 


HOME 


NEWS 


Fedlured Irnayes 

Imaoe of the Day Gallery 


Image Usage Guidelines 


The Triangulum Galaxy 


© 


.nasa.gov/multimedia/imagegallery/iotd.html 


Search 


Enter E-mail Address 



• View more than 700 

NASA.gov Image of 
the Day features 
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■h«» 


.■ ifc r *y« 


Tb« »«•**»»“《? 

«w«va»* ia^v** 1 - 1 — 


Put what about phones? 

The image of the day site looks pretty good on a big 
computer, but not so hot on a phone. It technically works, 
but not without a ton of scrolling and zooming. There has 
to be something better ... 


® http://wvvw,nasa,gov/ni,.. 


I saw an RSS feed on NASA’s 
site. Could you use that feed and build 
an Android app that reads it and displays 
the picture? That would be way cooler than 
hitting the website from my phone... 


Yes! We can write an app for that! 


Let’s put your newly developed Android skills to use 
and build an app that will let Bobby see the NASA 
daily image on his phone. He’s going to love it! 


you are here ► 
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picking the important feed content 


Plan out your app 

Before starting on your brand-new app, take a minute to plan it out. 
Since you’ll be building the app from he image feed from NASA, start by 
taking a look at the feed to get a feeling of what you have to work with. 


The feed is an RSS (Really Simple Syndication) feed. You can find out 
more about RSS feeds with a quick search of the Web, but for this app, 
just think of it as pure XML. 


Eclipse has a built-in XML editor that really helps to visualize the 
format of feeds like this. Go to http://www.nasa.gov/rss/image 
of the day.rss and save the content locally on your computer as 
an XML file. Then you can open the XML file in Eclipse (which will 
automatically open the built-in XML editor) and view away! 



I may day -feed 

saved lodally as 
)</\/lL -Pile av\d opened m 
Edifse's )<ML edrtor. 


RSS deader 



ih-fov^a-tioh 
3 bout the 
-feed. 



dbou 七 

day’s imay. 



Mciadaisi 

about the 


?=?Km! 

version^"i.O" encoding^ H UTF-S 11 

?=? Kml- styles heet 

href =*/€Kterralflash/NASA Detail/NASA Detail.xsf type="text^xsl" 

▼ [¥] rss 


® version 

2.0 

▼ [¥| channel 


[e] title 

NASA Image of the Day 

[¥] link 

http:/ /www.na sa.gov/tnul lime dia/imagegallle ry/i ndex. html 

[e] description 

The latest NASA "Image of the Day" image. 

间 language 

eh — us 

[¥] docs 

http : //bl ogs. law. ha rvard.edu/ tech/rss 

[|] managingEditor 

yvette.snn iith- l@na ngov 

[¥] webIMa&ter 

b rian.djr bar@n asa.gov 

▼ [¥] image 


® Kmlns:java_cod€ 

XQian://gov.njsa.buiJd.Utiisl 

[¥j url 

http:/ /www.na sa.gov/images/content/50 7664 mai njm ag€_lS5 16-3S7.jpg 

|¥| title 

Decorating the Sky 

[¥] link 

http:/ /www.na ia.gov/mul lime dia/imagegalle ry/i ndex. html 

[¥j description 


▼回 item 


® Kmlns:java_cod€ 

a Ian: "go v.n as a_ bu i Jd ■ Uti 丨 s 1 

[¥| title 

De cd rating the Sky 

@ link 

http:/ /www.na ia.gov/mul Eime dia/imagegal le ry / i m ag e_fe atu re_lS30,hlml 

[¥j description 

This mo&aic image taken by NASA's Wide-field Infrared Survey Explorer, or WISE, fei 

► [¥] guid 


[el pubDate 

Mon ^ 27 Dec 2010 00:00:00 EST 

► [¥] enclosure 




Design Source 
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working with feeds 



arpen your pencil 


There’s a whole bunch of stuff in that feed! If you show it all, 
you’re going to overload your users with information and miss 
the point of building a specialized mobile app for viewing the 
image of the day. At the same time, just showing the image 
would be pretty boring. 

Take a look at the XML view of the feed and pick a few things you 
think you should show. And make sure to say why you picked it. 
The first one is filled in for you. Add a few more on your own. 


Property to include Why include it? 


irmcl^C URL 



This is dh imay o+ the ddy app, allf 


you are here ► 
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arranging your data on the screen 



There’s a whole bunch of stuff in that feed! If you show it all, 
you’re going to overload your users with information and miss 
the point of building a specialized mobile app for viewing the 
image of the day. At the same time, just showing the image 
would be pretty boring. 

You were to look at the XML view of the feed, pick a few things 
you think you should show, and make say why you picked it. 


Property to include Why include it? 


URL I dc-f'mi-tcly war\*t display -the so 111 mdude {he ii^a^e URL. 

This is image -the day app, a-f-tcr all/ 

Tk ><ML -feed dotsr!i iirdude 七 he b^a\ry ’州 

data. But us*m 3 URU yo^ll be able ^ 

doa^load .may d*»afly \i 办⑽. 

The imay will help users ^uidkly -tdl what Jthc is abou*t : 

Youll r\ttd *bo make you *thc torrtti title ar\A 
dcsdv-*ift*ioy>, because i\\t c^amflc -feed doir>ia*ms mar>y of cadK. 

Ir> iht (ctd, -tiic ir^a^c dcsd\r*iftioy> IS blank, bu 七七 he 

•item dcsdv*if*t*ior> is populated do\r\rcd*tly. 

l-f *thc irmd^e is Coo\) users will >w3rrt *to redd about i*t. This 
isr / 七 *thc most inr\po\rtclh*t ir\-fo\rma*tioh, bu 七 i*t’s yea 七 *bo know. 


i*te 你 pubDa*tc NASA doesn't publish a hew image every day (妁。七。扒 y/cckcr\ds, -for example), 


so i*t helps *to khow y/hch -they did publish ima^e be*m^ displayed- 


Vouir a^sy/cv-s may be slightly di*W^\reh 七 a”d you may have pidked a di-f-fcv-c^t 
-field oy tv/o (a^d that’s pcv-Pcdtly OiO. Well use ihc pvopcv-tics hcv-c, but 
theve a\rc several othev pcir-Pcdtly good v/ays you dould build this app. 


i*tcm dcsd\rip*tioh 
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h^\ 

， i 


Screen Design Magnets 

To build your interface, add the View magnets at the bottom of this 
page to the screen. There is one View for each of the properties you 
picked from the RSS feed. 


title ih a Tcxtl/icw. 

/ 


Decorating the Sky 



Put the l/icws oh 
the sdvcCh heve 



TV>c imay URL 
displayed'm 3m Ima^cV'iow 
(T“is is a r>C>w tomfem ⑶七 bu 七 


1 七加 pubDa-tc ih a 7cx-t\/icw. 



Mon, 27 Dec 2010 00:00:00 EST 


l"Lcrtn dcsfi.vip'tioh 
( … a Tcx-tl/icw. 


This mosaic (mage taken by NASA's Wide-flJ 
Infrared Survey Explorer, or WISE, features! 
nebulae that are part of the giant Orion 
Molecular Cloud--the Flame nebula^ the 
Horse head nebula and NGC 2023. Despite r 
name」there Is no ffre roaring In the Flame 
nebula. What makes this nebula shine Is the 
bright blue star seen to the right of the cen_ 



you are here ► 
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getting ready to start coding 



Screen Design Magnet Solution 

You were to add the View magnets at the bottom of this page to 
the screen to build your interface. There is one View for each of the 
properties you picked from the RSS feed. 


the title is at the 
"top so you khow 

youVc lookihg at 




The da*tc v-cally dould 
ar>y>whcv-c> bu 七 

•rt’s k'md o-f 3 
subheddev- rt? 


p 


H Decorating the Sky 



Mon』27 Dec 2010 00:00:00 EST 



The is "(Voyrt dirtd 

stvc-tdhcd to 

"the siz^ o( -the sdv-ccr^. 


This mosaic image taken by NASA's Wide-fie 
Infrared Survey Explore^ or WISE, features 
nebulae that are part of tine giant Orion 
Molecular Cloud-the Flame nebula, the 
Horse head nebula and NGC2023. Despite i 
name, there Is ro fire roaring in the Flame 
nebula. What makes this nebula shfine Is the 
bright blue stair seen to the rfsht of the cen 



The dcsdv-iptio^ is y\\Cc ho have, but its 
drfmrtely y\oi 七 he mos 七 piede o( 

data. It’s also v-cally big/ Bcsi bo keep it at 
the bo-t-fcom o( -the sdvee^ out o( *thc way- 
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0 


o 


rm late for a math test, 
so IVe got to run. But so far, 
this design looks awesome, I 
can’t want to see it working! 



Time to start coding! 

Every good app starts with a good plan, and 
you’ve got one now (the selected fields from the 
RSS and the screen design). Now it’s time to start 
coding it. 

Here is how you’ll do it. 



Create a new project 

You’re building a new app, so start a new project. 
Mobile apps are small and concise, so get used to 
having lots of little apps (and projects) around! 



Store feed information locally 

Removing variables from development is a good thing. 
Store feed data locally, so you can focus on building 
your UI and not connecting to the feed. 



Build the UI using the stored feed data 

You’ve got a design for the UI; now it’s time to execute 
it. Create layouts, implement UI functionality, and get 
the app up and running! 


Connect the app to the XML RSS feed 

Once the app is up and running, just plug it into the 
XML feed and get the live data. It really is going to be 
that easy. Promise! 


you are here ► 
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make a new clean project 


Create a new project 

Now that you’re ready to start coding, make a new Android Eclipse 
project. Launch the new Android project wizard in Eclipse by going 
to File New Android Project. 


丁 he 

^olh have spaces ov- 
y\oi. But Its bettev- 
Icavc out spaces, 
bemuse B div-cd*fcov*y 
is dveated with 
the hdme 

•m youv- wov-kspa^c, 

乙 ommdhd — lihe 

^ 3 vigatioh is usually 
Coisicy without spaces. 


ooo 


New Android Project 


New Android Project 

Creates a new Android Project resource. 




Project name: Nasallailylniage 
Contents 


Select the latest 

pUt-Pov-rw you have 

i^s-toillcd (Z3 at 

the time o-P this 


® Create new project in workspace 


0 Create project from existing source 


文 Uss default location 


Location r /Vol ume s f MyData/work/ head -fi rst-andro id /w / 

Browse … 

0 Create projecE from eKistirig sample 

Samples: A ■: celerometer^l ： v r ' 

3 



Build Target 


VI 


TV^c affl'»6a*t'»ov\ 
v^awc V^as spates. 
TWis is sV>o>m "to 
wouv- usevs, so 
七 •* 七 * to be 
V\uw\dv\ vcddaWc. 


Target Name 

Vendor 

Platform 

A 


□ Android 1.5 

Android Open Source Project 

i.5 

3 

n 

']Android 1.6 

Android Open Source Project 

1.6 

4 


Android 2,1-updatel 

Android Open Source Project 

2.1-update 7 

u 

Q Android 2.2 

Android Open Source Project 

2.2 

S 

A. 

2 Android 2.^1 

Android Open Source Project 

2.3 

9 

T 

C 〕 X H 



Standard Android platform 2.3 
Properties — 

Appllcatior name: Nasa Daily Image 
Package name: com.headfirstbbs.nasadailyiniijge 


S Create Acliuitv： NasaDailvImage 
Mliin SDK Version: 



⑦ 






< Back 

Mext > 

Cancel 

Finish 

) 





A 


l^cb site p| U s appli^a-tioh 
y\Sn\t is a pvc-tty sa-fc 
joci -Poir a package ha^e. 


Make a dc-fa^l-b 

a 6 *tW»*b/- 

a6*tw*i*tY *t° ⑹七 d 
七 V^c pvojc6*t 

is d ^ood V-ulc -fov- 
s'm^lc-sdvcc^ 
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working with feeds 


fret rid of the autogenerated 'Hello' stuff 

You’re not going to need the autogenerated Text View showing 
the default “Hello World, NasaDailylmage” text. So before you get 
going, delete the TextView and the the String. 


o 


Open strings.xml (under res/values) and delete the hello String. 


■ffi Android Resources (default) 

®©@@[s]©[I]D]Az 


Resources 

Elenneints 



⑤ hello (String) 

(Dapp_name (String) 


Select the hello 
stv-ihg ahd 
Remove... 


Add... 



Remove.. 


Up 


Down 


Attributes for hello (String> 

(§) Strings , with optional simpte formatting, 
can be stored and retrieved as resources, 
You cat] add formatting to your string by 
using three mndard HTMLtags: b, i,, and 
u. If you use an apostrophe or a quote in 
your string, you must either escape it or 
enclose the whole string in the, other kind 
of enclosing quotes. 

Name* hello 

Value" Hello' World, MasaDailylrmage! 


Resources 


&lring&.Kml 




❺ Open main.xml (under res/layout) and delete the hello TextView. 


— =Views 

◎ CfistureOverlEiyVi 
(f) 5Lirf£iceViiew 
© View 
© ViewStub 
秘 WebView 
@ ArabgClock 
@ ALtoCompleteTe) 
⑧ Butlon 
© Checkfiox 
(il) CheckedTextView 
© Chronometer 
@ DatePicker 

r\\ n hI- L 


ello World. NasaDailvCrmaEe! 

■ ■■■ ■ 

and ro i d .“T exlView 


▼ 


Graphical Layout main.xml 


ru 


Layout Width 
Layout Height 

► 

► 

Properties 

► 

Cut 


Hi Copy 

詫 c 

Paste 

羿 V 

f*! Delete EE 

Select All 

說 A 

Show In 

► 

— r 



Selet 七七 he 
c\\ek and sclcd 


o 


Save your files. You now have a nice, clean app, without the boilerplate hello app content. 


you are here ► 
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store XML values for realitsic testing 


Store feed information locally 

Start by saving text values as string resources. Open 
strings.xml and add three new strings for the image 
title, date, and description. The easiest way to do this 
is to copy the values directly from the sample XML 
feed file you saved at the beginning of the chapter. 


s-t\rmgs.xm| with the 

added. 


飞 


<resources> 

〈string name= 〃 app_name〃>NASA Daily 工 mage</string> 

<string name=^test-image title〃> 


Values a 

•feed sawflc- 


Decorating the Sky 
</string> 

<string name=^test-image_date 

Mon, 27 Dec 2010 00:00:00 EST 
</string> 

<string name= 〃 test-image—description〃> 

This mosaic image taken 
Infrared Survey Explorer, 



plates y/V^cv-c you 

y\ccd *to add estate 
Aavad 七 cvs. 


by NASA Vs 
, or 《€ 


ide-field 
eatures 

three nebulae that are part of the g^ant Orion 
Molecular Cloud--the Flame nebula , th 气 Horsehead 
nebula and NGC 2023. Despite its name , there is 






Watch it! 


Watch out for escape characters 

Some of the characters in the XML file (usually 
\ and \) need to be escaped, to let Java 
know they aren’t control characters. Do this by 
preceding these characters with a \. 
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working with feeds 


Save the image m your project 


Images are stored in your Android project as resources in the 
res directory. Can you find a folder called draw able inside your 
project’s res directory? 


Here’s ves 

d'»v , c^*tov*Y > same 
yoiA\r layouts 
dr\d vcsou\r^CS 

avc located. 


?t 5 NasaDaiiylmage 

► 0 src 

► gjgen ICenerated Java Files] 

► ^Android 2.2 
^assets 
■§^res 

► (^drawable-hdpi 

►防 drawable-ldpi 

► (^drawable-mdpi 

► 色 layout 

► 色 values. 

G An d reidM an i test.xml 
隱 1 default, properties 


ttrwrw. Thcv*c 3\rc thv*CC 
di-Pfc\rCht d\rdwable 
di\rcd-fcov*ics hc\rc ... 



O 


There are three different 
drawable directories under 
res. What gives? 


Ah yes，the folders are for different screen sizes. 

One of the great things about Android is how many devices it runs 
on... and how many devices your apps can run on! The price for 
that versatility is the need to support a whole bunch of different 
devices with a wide range of resolutions and screen sizes. 

You’ll learn more about supporting different screen sizes and devices 
later. For now, just add images to the drawable-hdpi directory. The 
default emulator will use the images in this directory. 


De 


Open up a browser and navigate to the URL for 
the image in the RSS XML file. Save the file to 
your project in the res/drawabIe_hdmi directory. 
Call it test—image.jpg. 


Now that you have stored your data locally, let’s build the layouts 


you are here ► 
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arrange the views in layout xml 


»•• • 

\!\v*i v、suaU 

VC-fcVC^tC- 


Below are magnets with the XML layout declarations for the views in your layout along with 
the the views they represent. Drag the the vi gw XML magnets onto the layout on the next 
page of the exercise. This will complete the layout for the app. 



l/icw )(ML 



Decorating the Sky 



Title 


<TextView 

android : id="@+id/imageTitle" 
android : layout—width:"wrap—content" 
android:layout—height="wrap—content" 
android: text="@string/test—image_title"/> 


This mosaic image taker by NASA's Wide-field 
Infrared Survey Explorer, or WISE, features three 
nebulae that are part of the giant Orion 
Molecular Cloud-the Flame nebula^ the 
Horse head nebula and NGC2Q23. Despite its 
name, there Is ro fire roaring In the Flame 
nebula. What makes this nebula shine is the 
bright blue star seen to the right of the central 


<TextView 

android : id=’’@+id/image Description’’ 
android : layout_width =,, wrap content" 
android: layout—height=’’wrap—content" 
android : text=’’@string/test—image description ’’/〉 


Dcs^vip-tioh 


Mon, 27 Dec 2010 00:00:00 EST 


<TextView 



android: id=’’@+id/imageDate" 
android : layout_width =,, wrap content" 
android : layout—height=’’wrap content" 
android:text 二 " @string/test image date"/> 
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working with feeds 


<LinearLayout xmlns : android="http :// schemas.android.com/apk/res/android" 
android : orientation= M vertical" 
android : layout_width="fill_parent" 
android : layout_height= M fill_parent" > 





Put "the wid^t 

"to Complete the layout VouVc 
usmg Lihca\rLoiyou4 so you just 
y\tcd "to therw with the 

at the "top o( the 

sdvcch Bs -the -Piv-st ih the layout 

3hd ^OKrtihuih^ dowh. 


</LinearLayout> 
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see your progress 



Below are magnets with the XML layout declarations for the views. You were to arrange the 
the view XML magnets to complete the layout for the app. 


<LinearLayout xmlns : android= M http :// schemas.android.com/apk/res/android' 
android : orientation="vertical" 
android : layout_width= n fill_parent" 
android : layout height="fill parent" > 


<TextView 

android : id="@+id/imageTitle" 
android:layout—width="wrap—content" 
android : layout—height="wrap—content" 
android : text="@string/test—image_title"/> 


Title 


<TextView 

android : id= 〃 @+id/imageDate” 
android : layout—width= 〃 wrap_content 〃 
android : layout 一 height 二 〃 wrap_content 〃 
android:text=^@string/test image date〃/> 




<ImageView 

android : id="@+id/imageDisplay^ 
android : layout—width 二 "wrap—content" 
android : layout—height="wrap—content" 
android:src="@drawable/test—image "/〉 




<TextView 

android : id="@ + ici/imageDescription" 

android : layout width=^wrap_content rr 

android : layout—height="wrap_content" 

android : text="@ string/test—image—description"/> 



</LinearLayout> 
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working with feeds 



TesT DriVq 


Run the app by selecting the project in the Exclipse explorer 
view and selecting run. You’ll have to select Android 
Application in the u Run as” pop-up that displays. 





NASA Daily Image 

Decorating the Sky 

Mon, 27 Dec 2010 00:00:00 EST 



秦 


This mosaic tmage taken by NASA's Wide-fieid 
Infrared Survey Expioirer^ or WISEj features three 
nebulae that are part of the giant Orion 
Molecular Cloud—the Flame nebula, the 
Horsehead nebula and NGC 2023. Despite Its 
name, there Is no fire roaring in the Flame 
nebula. What makes this nebula shine Is the 
bright blue star seen to the right of the central 


Nice! The screen is looking good! 

The running screen matches your design. Excellent work. 
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picking the important stuff 


Hey, how come the 
description is showing but 
getting cut off. ShouldiVt 
it scroll or something?!? 


Actually, scrolling would be a good idea! 

You never know how long the description might be. 
NASA could throw a whole book in there, for all we 
know! After all, they are in control of the feed. The best 
we can do is make our app visually scalable. A good 
way to do that is just to make the entire screen scroll. 
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working with feeds 



w 


Wouldn t it be dreamy if you could just 
wrap up your entire layout into some kind of 
View that would automatically scroll? But I 
know it's just a fantasy... 


you are here ► 
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make it scroll 


Use ScrollVicw to show more cowtcwt 

ScrollView is a View you can add to your screens to make 
content scroll. ScrollView is a ViewGroup (Android’s name for 
layout manager). Use ScrollView by adding a child component to 
it, and the ScrollView will automatically scroll. 


TVis S^v-olll/icw wvaps the 

dcs^ip-tioh 卩咖〜 … 



〈ScrollView 

android : layout 一 width:"fill— parent” 
android: layout_height=’’fill—parent" > 

<TextView 

android: text=’’@string/image—descriptiorV 
android:layout—width=”fill_parent” 
android: layout—height=’’wrap—content’’ /> 

</ScrollView 〉 





\s ⑼。 u 吵 * to overf ill 

七 s ⑽“ 7 知屮 


How much should scroll? 



... av\d here’s 七七 

sdv-ollm^ 

mside Sdvoll\/*ic>M! 


Molecular Cloud-tine Flame nebula^ the 
Horsehaad nebula and NGC 2023 . Despite its 
there Is no fire roaring tn the Flame 
makes this nebula shine Is the 

d nu? ^1 0 T" 5 A f n the rl ^ ht of the antral 
l St . ar ' Alflltakj ls the easternmost star 
l S! 0rlon s be t. Wind and radiation from Alnltak 
blasts away electrons from the gas In the Flame 

,f M faj , t C l USing ft t0 bec ⑽ e ionized and R low in 

visible light. The Snfrared gtow seen by WISE fs 
jrom dust warmed byAInitak's radiation. The 

t R ° rsehead nebula appears in thSs Image 
as a faint bump on the lower right side of the 

eas^ a rlrn St ^ 他 ibfe nebula is 

ft? ( ^cognizable as a dramatic sflhouette in 

m' 0 ? horse，s head - n 's classified as a 

dense cioud blocks out 

WKF'l i b f 0 lgh i ° fthe g |ow ^ggas behSnd ft. 
WISEs Infrared detectors can peer Into the cloud 

Slow of the dust Itself. A thfrd nebula, 
, NGC 2023, can be seen as a. bright efrde in the 

l°rTflP^ f ° f th h e l mage ' NGC 2 ° 23 15 classified as 
a retieaion nebula, meaning that the dust is 

reflerthngthe visible light of nearby stars. But 

riiKnl^f S rT the j[ frared g |:ow 时 the warmed 
ustit^Hf. Color in this fmage represents specific 


LOTS c^f sdvollm^ 七 wt. 


You can put one or more of the existing Views into the ScrollView. 

Any Views you add to the ScrollView will scroll, and the views not in 
the scrollview won’t. Since your goal is visual scalability, just make the entire 
layout scroll. This way, you can be gauranteed to have a scalable UI, even 
if unepxected information comes through the feed (like a really long title, for 
example). 

One catch using Scrollview is that it can have only a single child View. 
In the example on this page, the Test View is added directly as a child 
to the Scrollview. But for the whole screen to scroll, you need multiple 
Views to scroll. The solution is to add a complete Li near Layout (with 
multiple child Views) as the Scrollview^ child. 
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working with feeds 


i^harpen your pencil 


Add and amend the following code to use the ScrollView 
to make the entire screen scroll. You’ll need to make the 
ScrollView the main layout. And since the ScrollView can 
hold only one View, you need to add the entire LinearLayout 
as the one ScrollView child View. 


七 his 

Cir>tiV-C 

layout m 3 
Sdv*oll\/« 


〈LinearLayout xmlns : android= 〃 http://schemas.android.com/apk/res/android" 
android : orientation= M vertical" 
android : layout—width=' ， fill—parent ▼’ 
android : layout—height= n fill—parent" > 

<TextView 

android : id="@+id/imageTitle" 
android : layout—width=’ ， wrap_content n 
android : layout_height= M wrap_content" 
android : text="@string/test—image—title，，/> 

<TextView 

android : id="@+id/imageDate" 
android : layout_width= n wrap_content" 
android : layout_height= M wrap_content" 
android : text="@string/test—image—date’，/> 

<ImageView 

android : id="@+id/imageDisplay" 
android : layout_width= n wrap_content" 
android : layout_height= M wrap_content" 
android : src= M @drawable/test_image M /> 

<TextView 


公 uidk Tip: This needs ■{» 
be m -the v-oot layout 1( 
you add -this layoui io a 
Sdv-oll\/icv/, you’ll v\ccd -fco 
rwov/e 七 his "to 七 he Sdv-olH/icw. 


android : id= M @ + id/imageDescription" 

android : layout_width= M wrap_content" 

android : layout_height= M wrap_content" 

android : text= n @string/test—image—description"/> 


</LinearLayout> 
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watching it scroll 



You were to used the ScrollView to make the entire screen scroll. 
You needed to make the ScrollView the main layout. And since the 
ScrollView can hold only one View, you should have added the 
entire LinearLayout as the one ScrollView child View. 


<Sd\roll\/icy/ >cmlr\s ： ar\dv-oid :::1 ，， h*t*tp : / / sdhcmas.ahdroid doim/apk/vcs/a^droid^ 丫伽 vcrwcrwbcv- *to r^ovc 

-the %mUs ： a^dv*o*id a*t*tv*ibu*tc 

L-nr>C3V*L-3Vou*t *to 


andhroid : laYou*t_wid"th 二 


Bc5*mv>*m5 ahdroidhlaYou'tJ^iglvt^^ilLparerrt” 

o*f 七 lie 

Sdvoll\/*ic>w 


> 


*tV>C Sdvoll\/ic>M (*thc v-oo*t 
v >C>w) 


The domflc*tc 
y>ov>-stvoirm^ 
layout 


<LinearLayout //nrh^mnn 11 n 1 1 ~n 1 -^nm/npl^/r^n/nnrirni ri 1 

android : orientation="vertical" 
android : layout_width="fill—parent" 
android : layout_height="fill_parent' 

<TextView 


> 


android : id="@+id/imageTitle" 
android : layout—width= n wrap—content ’， 
android : layout_height= M wrap_content n 
android : text="@string/test—image_titie'，/> 
<TextView 


android : id="@+id/imageDate" 
android : layout_width="wrap_content n 
android : layout_height= M wrap_content M 
android : text="@string/test—image—date"/> 
<ImageView 

android : id="@+id/imageDisplay" 
android : layout_width="wrap_content n 
android : layout_height= M wrap_content" 
android : src= M Qdrawable/test—image，，/ > 
<TextView 

android : id="@+id/imageDescription" 
android : layout_width="wrap_content n 
android:layout height= M wrap content" 



The nrmcv* vcma'm 

urrtou 乙 hedl mside 七 he 
Lmcav-Layout 


android : text="@string/test—image_description"/> 
</LinearLayout> 


</Sd\roll\/iew> 


tY\d o( 七 lie 
Sdvoll\/*icv/ 
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working with feeds 



Tesr DriVq 


Run your app to check the scrolling you just added. You should 
see the entire screen scrolling. 


Look hov/ ENTIRE- 
L*mcav-Layou*t is 

sdv-oll'm^ 朽 o 七 jus*t c 


OY\t 



NASA Daily Image 


Thts mosaic Image taken by NASA's Wide-fleld 
Infrared Survey Explorer』or WISE, features three 
nebulae that are part of the gfant Orion 
Molecular Cfoud-the Flame nebula, the 
Horsehead nebula and NGC 2023. Despite its 
name, there fs no fire roaring In the Flame 
nebula. What makes this nebula shine is the 
bright blue star seen to the right of the central 
cloud. This star, Alnfitak, fis the easternmost star 
in Orion's belt. Wind and radiation from Alritak 
blasts away electrons from the gas in the Flame 
nebula, causing It to become tonized and glow In 
visible light. The Infrared glow seen by WISE Is 
from dust warmed by Alnitak's radiation. The 
famous Horsehead nebula appears In this Image 
as a faint bump on the lower right side of the 
vertical dust ridge. In visible light, this nebula is 
easily recognizable as a dramatic silhouette in 
the shape of a horse's head. It is classified as a 
dark nebula because the dense cloud blocks out 
the vfslble lf?ht of the ?lowfn? qbs behind (t. 


ttcv-cs the 
scroll bat. 



Everything is scrolling as expected. 

The scrolling is working properly. See how the entire screen 
content scrolls up and down together? That’s because 
you added the entire LinearLayout as the child to the 
ScrollView. 

Let’s show it to Bobby and see what he thinks! 
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start your parsing 



Wow, thafs looking 
pretty slick! But whafs 
this about not hitting the 
actual NASA RSS feed? 


Oops! Almost forgot about the actual feed 

Things are going really well with the design and layout. 
The screen looks like you want. Now it’s time to make 
it work the way you want... parsing the feed data in real 
time. 
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working with feeds 


Choose a parser 

There are plenty of XML parsers out there, and Android has built- 
in support for three of them: DOM (Document Object Model), SAX 
(Simple API for XML), and XML PULL. They each take a different 
approach to parsing the XML and each has benefits and drawbacks. 
We’re going to skip the big XML parser smackdown here (don’t worry, 
though, you can find plenty on the Web) and just pick one. 


Let’s keep it simple and start with SAX. 


Parsing Up Cl^se 


SAX works by firing events while parsing the XML. There is no random access with SAX. The 
parser begins at the beginning of the XML, fires appropriate messages, and exits. Here’s a quick 
sample of a few events that get fired in the first three lines of the NASA image feed. 



lihC by lihe A 



^ o 






Start Element: channel 



Start Element: title 

Characters: “NASA Image of the day” 

End Element: title 


The parser for the NASA feed will need to listen for the SAX start element messages for the 
fields in the app (the title, image URL, description, and date) and cache the values. That’s it! 


Let’s review some Ready Bake parser code to keep you moving! 
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ready bake parser code 


汉鄉9 Ba 料 

0 >pe 


SAX-based feed parsers look pretty much the same. Now that you understand 
how the SAX parser conceptually works, here is a parser packaged up as 
Ready Bake code that you can just drop into your app. Don’t worry about 
understanding everything; just add it to your project. But feel free to explore it! 


public class 工 otdHandler extends DefaultHandler { 

private String url = ''http://www.nasa.gov/rss/image of the day. rss' 


private boolean inUrl = false; 
private boolean inTitle = false; 
private boolean inDescription = 
private boolean initem = false; 
private boolean inDate = false; 
private Bitmap image = null; 
private String title = null; 
private StringBuffer description 
private String date = null; 

public void processFeed() { 

try { 



S'mdc events 
called scpava*tcly Hike 
七 mg and 

七 iieiv keep 

*tv*adk o( element 

) . 

you vc m •- 


new StringBuffer() 


Coh-figuvihg ihc 
reader dhd pcivscv*. 


SAXParserFactory factory = 

SAXParserFactory.newInstance(); 

SAXParser parser = factory.newSAXParser(); 

XMLReader reader = parser.getXMLReader(); 
reader.setContentHandler(this); 

InputStream inputStream = new URL(url).openStream(); 
reader.parse(new 工 nputSource(inputStream)); 
catch (Exception e) { 


Make 

七 he 

(ttd URL. 




the fa VS*I ^ 5 - 


private Bitmap getBitmap(String url) { 

try { 

HttpURLConnection connection = 

(HttpURLConnection)new URL(url).openConnection(); 
connection.setDoInput(true); 
connection.connect(); 

InputStream input = connection•getlnputStream(); 

Bitmap bitmap = BitmapFactory.decodeStream(input); 
input.close(); 
return bitmap; 

} catch (工 OException ioe) { return null; } 

} 
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working with feeds 


public void startElement(String uri , String localName, String qName, 

Attributes attributes) throws SAXException { 
if (localName. equals ( 、 'url 〃）） { inUrl = true; } 

else { inUrl = false; } 

if (localName. startsWith (''item ”）） { initem = true; } 

else if (initem) { 

if (localName • equals (''title ’’）） { inTitle = true; } 

else { inTitle = false; } 


if (localName . equals (''description ’’）） 
else { inDescription = false; } 


inDescription = true, 


if (localName . equals (''pubDate^) ) { inDate 

else { inDate = false; } 


true; 


…. 3 hd i*f youVc ih 
ah clcnr»Ch-t that 
you airc ih-tcircs-tcd 
the 


public void characters(char ch [ ], int start, int length) { 

String chars = new String(ch).substring(start, start + length); 
if (inUrl && url == null) { image = getBitmap(chars); } 

if (inTitle && title == null) { title = chars; } 

if (inDescription) { description.append(chars); } 

if (inDate && date == null) { date = chars; } 


public String getlmage() { return image; } 
public String getTitle() { return title; } 
public StringBuffer getDescription() { return description; 

public String getDate() { return date; } 


Wtrt ave a autssors. so you 
ddr> i\\t tacMtd vav-iablcs 
ba 乙 k -fvom *tV>c pavsev*... 




Download the IotdHandler code 
from the Head First Android Development 
site and add it to your project. 
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connecting everything together 


Connect the handler to the activity 

Now that you’ve added the feed parser code to your project, you 
need to use it in your activity. Start by instantiating the handler in 
your Activities onCreate method. 


public void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R•layout•main); 

IotdHandler handler = new IotdHandler() 
handler .processFeed (); 气 - - … 




Cvca*tc 
harullcv-... 




True, the values are cached in the handler, 
but never displayed. 

Let’s make a method called resetDisplay that will 
set all of the view data on screen. Then you can call that 
method in onCreate () afterprocessFeed () returns. 
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working with feeds 




Code Magnets 

Complete the resetDisplay () method below by retrieving 
references to the on-screen Views (using f indViewByld) and 
setting the values on those Views with the values passed in. Once 
this method is complete, you can use it to pass in the values from 
the feed. 


private void resetDisplay(String title. String date. 
String imageUrl, String description) { 


a -to ov\ 

\/icw. TliCh set the 
values oy\ those l/icws -fco ihc 

values -fvorw -the pavsev-. 



youv 



(TextView) findViewByld (R. id. imageDate) 


(TextView)findViewByld(R.id.imageTitie); 


titleView.setText(title) 


TextView descriptionView 


(ImageView) findViewByld (R • id • imageDisplay); 


(TextView)findViewByld(R.id.imageDescription); | dateView.setText(date); 


ImageView image View 


imageView.setlmageBitmap (image); 


descriptionView.setText(description); | TextView dateView 




TextView titleView 
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setting the feed data on screen 


^ t 


Code Magnets Solution 

You were to complete the resetDisplay () method below 
by retrieving references to the on screen Views (using 
f indViewByld) and setting the values on those Views with the 
values passed in. With this method complete, you can use it to pass 
in the values from the feed. 


private void resetDisplay(String title. String date. 
String imageUrl, String description) { 


TextView titleView = | (TextView)findViewByld(R.id.imageTitle )} 

jitleView.setText(title)^J ^ a 代“⑽仫 如她 

viow set *to 

t^t\\tA value -fvom {}\t iiar\dlcv-. 




a *to 

i\\t 


Is ： , 

Same deal date y 七 

View v-c-fcv-cndc 3r\d sc*t 
*to i\\t value -fvom i\\t farsev-. 


Image View image View 



(ImageView) findViewByld(R. id. imageDisplay) 


imageView. setlmageBitmap (image); 


Use the ir^ajc -Pvom -the -Peed 
pav-sev- and set i*t oy\ 七 he |rwajc\/icv/. 


TextView descriptionView = \ (TextView)findViewByld (R. id.imageDescription) 


descriptionView.setText(description); 


Fiph up by gcUmg ihc d 议呻七 i 0h 〜 
乙把 hed dcs^v-ip-tioh value. 
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working with feeds 


Now you can finish connecting the handler in the 
onCreate () method. Add a call to resetDisplay () 
after handler • process Feed () • This will take the 
cached values in the parser and set them in the Views screen. 


resetDisplay(iotdHandler.getTitle () f iotdHandler.getDate () f 
iotdHandler.getlmage(), iotdHandler.getDescription()); 

The v-csctPisplay method is a hclpcv- method you’re about io wv-itc -to 
populate the -fields oy\ with the pav-sed data- 



Tesr DriVq 


Everything is plugged in with the parser. The parser is integrated 
with the activity, and the results from the parsing are displayed on 
the screen. You should be good to go. Go ahead and run the app. 



Hmm ， a bls^k 

stVCCm... 

Uh oh! The screen is gone! 



Clearly, something broke along the way. 
What broke? Where would you look to 
find out what’s broken? 
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no internet 


Find errors with LogCat 

It’s OK; errors happen! The important thing 
is knowing where to go to find out what’s 
happening with your application, so you can fix 
things when they break. Android uses a built- 
in logging mechanism that outputs to a screen 
included in the Android Development Tools 
(ADT) called LogCat. 


Open LogCat by going to Window Show 
View Other, which will bring up the Eclipse 
Show View dialog. Expand the Android folder, 
select LogCat, and press OK. 




Show View 


AW，d (older. 


Select LogCat 


type filter text 

► ^General 
(^Android 

@ Allociition Tracker 
y Devices 
(Tj Emulator Control 
iffi File Explorer 
Q Heap 



— Resource Explorer 
聲 Threads 
► &Ant 

Use F 2 to display thie description For a 
selected view. 


Cl« 6 k 0^ 


After you click OK, you’ll see the new LogCat view in your Eclipse workspace. 


Lo^Ca-t sV\o>/s as a -tab 
{\\c bo*bW screen ^ 

Problems 區 Declaration 曰 Ccms*Dleji^fiL:gCat £3 


© ® O ® © 


Time 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 

01-17 


pid tag 


20:28 

20:28 

20:2S 

20:2S 

20:28 

20:28 

20:28 

20:2S 

20:2S 

20:30 

20:30 

20:30 

20:30 

20:30 

20:32 


: 04.075 
: 04.095 
: 04.124 
: 04.134 
: 07. 035 
: 07.404 
: 08. 245 
: 08. 275 
: 13.505 
: 08. 245 
: 08.245 
: 08. 985 . 
: 09 _ 0:9 
: 09. 

: 51/695 


rtruIroidR'uxLtime 

dalvikvm 

^ETtrircrETtftTOrrtTTn^ - 

id 即 

dalvikvm 
工 ot-dHandler 
Activitytlanaaer 


Ac ： t i vi t y Ma na crer 

dalvikvm 

InputReader 

InputReader 

rtT ： i-IAssembler 

AEi-IAssembler 

AI ： i-IAssenitler 

SntpClient 


Log 

Message 

V V Jm v 卜 Jm . | Jm LU. V ^ ^ I ■ I W X h • 1^ ^ Jm 

Skuttina domL Vtl 

ec CCIITCUPUHT freed 101K, 69Sf free 317K/1024K, e 
NOTE. -zLl 



Loj s*ta*tcw\c^ts 


m 


n：il OK/OK , paui 


adbd discoriiLected 
GC EXTEfJT^I ALLOC freed 42K. 53Sf free 2537K/5379K. external S84K/1C 
IOException: lava. net. UnknomiHostException: . nasa . qov 

Displayed com. ionathansimon. riasa. iotd/ . Nasalotd : +4s21ms (total +ln 


Displayed com . : android . laimcber/com. android . I ： i'uiicher2 . Launcher : +lm^ 
GC EXPLICIT freed 103K, 51SS" free 2895K/5895K. eKterml 2075K/2461K 
Device recorLiicp-ijred: id=0x0 , name=g , ?Terty . display size is now 320 k^ 
Touch device did not report support for X or Y axis! 

Qenerated scanline 00000077:03515104 00001004 00000000 \ 65 ippl i ： 

aenerat-ed scanline 00000177:03515104 00001001 00000000 \ 91 ippl i ： 

aenerated scanline 00000177:03515104 00001002 00000000 \ 87 ippl i ； 

reguugst time tailed : java. net. SocketException : Address iamily not s 


Filter: 



tteve youVc ^ say'm^ 

*tV>e host is y>o*t -fou^d- TKaVs odd，because 
you just y/cy>*t *to y^asa ^ov -fvom youv- bvoy/sev. 


379 

id^i：i 

387 

dalvikvm 

3:37; 

^IotilHandler 

Ilf 

ictivitytla nailer 


adbd disc 



cted 
LOC 




IOException: i ava . net. UrJ-[nomriHostExcept.ion 



1 SS 4 E/K 


Lli^Lin^inion 1 (total +ln 


Look ^ they will show up ih red. 
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working with feeds 


Use permissioiis to gam restricted access 


The UnknownHostException is thrown here because you need 
permission to access the Internet. 

With all the cool stuff you can do with Android devices, it’s hard to 
remember that they are mobile devices. And because of this, Android is 
built to be super careful about making sure each app has rights only to the 
system resources it absolutely needs. The only way for your app to get 
those permissions is to request them. 


How do permissions work? 


You can specity the permissions your app needs using a group of 
permission constants in AndroidManifest.xmL When users install your app 
from the Android market, they are prompted with a list of permissions that 
your app requsts. If they agree, they accept the permissions and the app 
installs. 

As an example, let’s take a look at the Android market install page for the 
official Twitter app. 




All 



OY\ 七 

avc 



android.permission.ACCESS—FINE—LOCATION 


android.permission.MANAGE ACCOUNTS 
android.permission.AUTHENTICATE—ACCOUNTS 
android.permission.USE—CREDENTIALS 


android.permission.WRITE—SYNC_SETTINGS 
android.permission.GET—TASKS 


android.permission.READ_CONTACT S 
android.permission.WRITE 一 CONTACTS 


android.permission.INTERNET 


Enough about Twitter- Let’s add permission to your app! 
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using permissions 


Add a permission to access the mterwet 

The Twitter app had a lot of permissions, but 
your app just needs permission to access the 
Internet. Follow these instructions to add the 
Internet access permission. 



Open AndroidManifest.xml 

The AndroidManifest file is 
generated by the new app wizard. 
You can find it in the root of your 
project. Double-click the file to 
open it. 


Na&aDailyEmage 

► ® sre 

► gen [Generated Java Files] 

► ^Android 2.2 

色 assets 

AndroidManifest.xml 
勤 default.properties 



^dvo'>dMavx'»wt 

V>vo\cdt 



Add a new permission to the manifest 

Just like all of the other Eclipse XML editors you’ve been working with, 
there’s a custom editor for AndroidManifest file. Click on the Permissions 
tab and press the Add button to add a new permission. 



^ ... sclcdi 

Pevmissi 。灼 s *tab, 
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working with feeds 



Select the permission type 

When the dialog opens, select Uses Permission and click OK. This tells 
Android that you want to use a permission in your application. 




Select the permission 

There are a bunch of different permissions that you can ad to your 
application. Since you’re accessing the Internet to get the feed and the 
image, select the android. permission . INTERNET permission. 


•W 1 Android Manifest Permissions 

Permissions 

⑪ Uses Permission 


E ⑪ 0 ® Az 



Attributes for Uses Permission 

(y) The uses-permission tag requests a "permission" that the 
containing package must be granted in order for it to operate 
correctly. 

Name andro|d.permission.INTERNET 

android.permission.lNSTALL.LOCATION^PROVIDER 
android.permission.lNSTALL_PACKACES 
android.permission.INTERNAL_SYSTEM_WINDOW 



andro 




android.permission.KILL BACKCROUND PROCESSES 


丁 he diropdovm shows ^LL -the 
permissions you ^ add. Sclc^-t 

ahd\roidpcirmissioh.|/VTER/VET. 


Manifest Application Permissions Instrumentation AndroidManifest.xml 


To apply the changes, save the file when you’re done. 
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fireside chat 


Fireside Chats 

獅 


Tonight’s talk： Permissions 


Android App: Android Operating System: 

What, seriously? I have to ask permission to do 
everything? Don’t you trust me at all? This is 
ridiculous! 

No, it isn’t ridiculous. I just need to be really careful 
about what I let you do unsupervised. 

Unsupervised?!? Look, I’m not a child! 

Well, listen, my user (who is also your user I might 
add) expects us all to work together to keep the 
whole phone secure. We can’t allow any viruses, 
unauthorized data access, unecessary Internet 
access, or other security no-nos to spoil their 
experience. Then we all lose! 

OK, well I kind of see that. But really, I have to tell 
you everything I do? Like everything? That’s lame! 

Sorry, but you do. That way, I can tell our user what 
you’re planning on doing and they can decide if 
they will let you do it. 

Why can’t I just ask them myself? 

How can I trust that if the user says no to you you’ll 
actually listen? You wouldn’t even listen to me if I 
couldn’t kill your process! 

Hey man, that’s low. 

Well would you? 

You’re right, I probably wouldn’t. BUT ... 

I rest my case! 

Mffft! Well, I suppose I don’t really have a choice, 
do I? 

Nope! You don’t have a choice. My way, or the 
highway, buddy. 

Harsh. 
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working with feeds 



TesT DriVq 


Now that the permissions are properly set, the app should 
run correctly, parsing the feed and displaying everything 
on the screen. Go ahead and run your app! 


TV^c data W 

looks y>o(i … 



* li! i 6：14 

NASA Daily Image 

Going Supernova 

Fri, 14 Jan 2011 00:00:00 EST 



:- ^ * 


.. 

- 







Wuh - s with a || 


Better, but not done yeti 

The feed is working (fantastic I )， and fresh data is 
bing displayed on the screen. This is all great, but 
something is going wrong with the formatting. 


How do you find out what’s wrong? 
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picking the important stuff 



If there s a custom 
logger in the Android SDK, 
maybe there's something for 
debugging layouts too. 


In fact，there is a built-in tool. 

That tool is rhe Android Hierarchy Viewer. This 
cool little tool from the Android SDK lets you do all 
kinds of introspection on your layouts and Views to 
get to the bottom what’s going on. 





Launch the Hierarchy Viewer by 
opening a terminal, going to your 
<SDK>/tools directory, and 

executing hierarchyviewer at 

the command line. 
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working with feeds 


Find layout problems with HicrarchyViewcr 


When you launch the Hierarchy Viewer, the first thing you’ll 
see is the selection screen below. There are two main views; the 
view you’re going to look at inspects the screenshot and allows 
you to view your Views in a tree and see visual details about 
them. (The other screen is also useful; it shows a more visual 
tree structure with detailed attributes about each view). 


〆 


II stt 
^i\\tv\ you 
Hicvavdhy 


D n 


Hiersirchy Viewer 




(Q emulator-SSS 4 
StatJ^Gar 

StalusBarExpanded 
TirackingView 

coirti.jonathansimDn.nasa.iold/CDmj^fiatiiansjmDn.nasa.iolid.NasalG 

com .androidJau nchery'com.aridrQj^rraurichGr^.Laijncher 
com L androjc^ intemaLseruice.ud^ffpaper.lmageWallpaper 



Inspect Screenshot 





A 


cmulaW, ^ 

lau^ mam W«^dov/. 


Roomed rn ^ 

*bV>c 

6yoss^3»v-s 3v*c) 



Youv aff- TV>c v-cd s^uavc 

siavvou 灼 ds *tV>c \/ic>m selected \ y \ 

•the 


Hierarchy Viewer 


N 


Save as PNG 


Refresh Screenshot 


(5 


Refresh Tree 


Load Overlay 


• Show In Loupe 


Q0Auto Refresh 


CD com.android.internal.policy.impl.Phor 
▼ Cj android.widget.LinearLayout 
▼ iBandroid.widget.FrameLayout 
圍 and roid .widget.TextVie w 
▼動 android.widget.r rameLayout 
'CD android.widget.ScrollView 
▼ C] android.widget.LinearLayou 
圍 android.widget.TextView 
圍 android.widget.TextView 
圍 and r oid .widyeLlmay if Vii: 
圍 android.widget.TextView 


llllllllllllllllllllllllllllllllllllllllllllllll 


S rill 蠢 12:01 


NASA Daily Image 

Going Supernova 

Fri, 14 Jan 2011 00:00:00 EST 



tteve is *thc c%*tv-a 
spade... INSIDE -tiic 
(you 

tar\ *tcll because 
*tKc Ima^c^ow is 
St\tC{,tA OY\ 七 he 

^y\A *tV>c v-cd 
bo% mtludcs 
cx.*tva spade). 
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aspect ratio 


Set the adjustViewPounds property 

You can see from the Hierarchy Viewer that the I mage View is too big. 
But why? The cause is actually that the apsect ratio is not preserved when 
the Bitmap from the Web is displayed. The aspect ratio is what keeps 
the width to height proptionally the same when you resize an image, 
and the image is being resized by the internal layout code to fill the screen 
width. 


adj ustViewBounds = false 


adj ustViewBounds = true 



Without kccp'mg 
■the aspect va-tio 
"the the 
age stir 士 
ahd takes up -too 

啪 u 乙 h spa^. 


NASA Daily Image 

Going Supernova 

Fri, 14 Jan 2011 00:00:00 EST 


NASA's Spitzer Space Telescope, astronomers 
discovered a giant supernova that was smothered 
In Its own dust. In this artist's rendering, an outer 
shell of gas and dust - which erupted from the 
star hundreds of years ago - obscures the 
supernova within. This event in a distant galaxy 
hints at one possible future for the brightest star 
system in our own Milky Way. Image Credit NASA/ 


set -to 

■tv-uC) Way 
s*tv-c*U^cs *bo he 


cdys o-f 

by\A sets a 


V^i^vb pv-ofrbional 
■to y/idHJv 


If you set the adj ustViewBounds property to true in your layout 
XML, the extra space will go away. 

r 一 

<ImageView 

android : id= 〃 @+id/imageDisplay^ 
android : layout—width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 

android:adjustViewBounds="true" /> 


Sc*t fvopcvty *m 
youv* byou*t )(A1L. 
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working with feeds 




TesT DriVq 


With the adj ustViewBounds properts upated in your 
layout, run the app again. This time, you should see the image 
resized correctly in the layout. 



The daia 

the -feed 
looks good... 




I ^ H 


NASA Daily Image 

Going Supernova 


Fri, 14 Jan 2011 00:00:00 EST 



Ar\d wbra 
spate »S 


While searching the skies for black holes using 
NASA's Spitzer Space Telescope, astronomers 
discovered a giant supernova that was smothered 
in its own dust. In this artist's rendering, an outer 
shell of gas and dust - which erupted from the 
star hundreds of years ago - obscures the 
supernova within. This event in a distant galaxy 
hints at one possible future for the brightest star 
system in our own Milky Way. Image Credit NASA/ 




It’s all coming together! 

The layout works just like you designed it, the feed parsing is 
up and running, and the layout issue with the 工 mage View is 
fixed. 
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user feedback 



o 


0 


This is looking great! I’m super 
psyched to see how far you’ve 
come with the app so quickly! 


■E：. 


w 


Really great work! 

You really did put your new Android development skills 
to use and built a whole new app! And you learned even 
more skills along the way. You added scrolling layouts, 
image resources, and more. But most importantly, you 

built a cool app that made your users happy! 
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working with feeds 



Your Android Toolbox 

Now that you have a cool 
RSS feed-parsing app 
in your toolbox, you can 
build all kinds of your own 
cool feed-based apps! 




BULLET POINTS 


Bull 七 -… Pvoblc»« Solvcvs 

@ Use Lo^Cat viey/ todt I03 灿』 

a^d errors -from Y 0 ^ a ?? s . 

^Use *to a^aly« V<>^ 

v^s a,d la Y ou-b. TW,s da, be 

lavou-ts or v.cv/s t 
b^avrn^ as you m •十七 -to. 

1/icvz Rouhdup 

^ Us [ ydi wto display text /ou dah 
use，i s ， a|| M like labels, o, .cally 

b， 9 M likc /.age d 仪 h P t 嶋 . 

參 W 处 /^3ad/i C w -to display images. / ou dah 

add you^ owh ima 9C s -to the ^ di^Uv 

ahd d _y 侁加 i h ah Ua 3 d/W 7 

參 W” S^olH/i C w -to make youv^ dohtcht 

s 〜 o11 0h S^olH/i C w dah have ohly 

oh C cM\d (/icw ; so w^rap multiple dhild views 

,ha la y° ui ^ ^ them all 办 oil. 


■ 


■ 


■ 


When working with RSS feeds, download a 
sample of the feed and decide what content 
in the feed you want to use in your app. 

Start with sax parsing, but explore the 
dom and xmlpull parsers to see if they 
will work better in your app. 

It’s a good practice to break your app down 
into small development pieces. For RSS 
feed apps that rely on the Internet, it's 
perfectly acceptable (and even a good idea) 
to build out your app with test data and plug 
in the Internet services later. 

Add image resources to the res/drawable- 
hdmi directory (for now). These will get 
picked up by the Android compiler and the 
images will be available to your application. 

Use imageviewto display images in 
your app. 

Use Scroliview when your app's 
content is too big for the screen. (Just 
remember that Scroliview can have 
only one child). 

When things go wrong, use LogCat to 
look at Android errors and log statements. 

Make sure your app has the proper 
permissions configured in AndroidManifest. 
xml. 

■ Use HierarchyViewer to debug 
your layouts when your app isn’t displaying 
correctly. 


■ 


■ 


■ 


■ 
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4 long-running processes 







When things take time 


Oh, ril get to it. 

But not before I eat 
my breakfast, drink 
my coffee, finish 
the paper... 卜 


w 


It would be great if everything happened instantly, unfortunately, 

some things just take time. This is especially true on mobile devices, where network 
latency and the occasionally slow processors in phones can cause things to take a bit 
longer. You can make your apps faster with optimizations, but some things just take time. 
But you can learn how to manage long-running processes better. In this chapter, you’ll 
learn how to show active and passive status to your users. You’ll also learn how to perform 
expensive operations off the Ul thread to guarantee your app is always responsive. 


this is a new chapter 
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enhancement request 



Ive been using the NASA app, and I love 
it! One thing, though. NASA updates the 
feed at different times every day. Do 
you think you could add a refresh button? 
Right now, I have to restart the app 
every time I want to check... 


Sounds like a reasonable request... 

But why is a refresh button necessary? You’ll 
want to make enhancements to your apps from 
user feedback, but it’s a idea to understand why 
you’re being asked for something. You have a 
request to add a refresh button. Let’s take a look 
at the Activity Lifecycle which will explain when 
the feed loads and why it isn’t enough for Bobby... 
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long-running processes 


The Activity Lifecycle 

Activity has a number of special methods (called lifecycle 
methods) that get called during the lifecycle of the activity. The 
onCreate () method where you set the layout is one of these 
methods, and there are many more. A few of these methods 
are shown here, so you can see where the feed is (and is not) 
refreshed. 


Tiiis is y/iicv-c you fv-otess 
i\)t -Peed a^d sc*t values 
-fov- views. 



onCreate() | 卜 onStart() I ^ onResume() I 


Your app 
is running 
front and 
center 





TV^'is \s tailed 4 ⑼ 7 ouV， 
at 七 wvb/ |S 

切尹 dh/ >/^cv-c layo^ 


ottuvs. 


TWis is 乙 ailed youv- 
attw'ity is displayed 
•tVic stv-ccn. 

rm， d — 一 

n ； ah , alc ^ ^ aho 仏饮 

° / a 〜仏 ‘ 

to a diHc\rchi app. ' 



When does the feed refresh? 

The feed refreshes only when the activity starts and the 
onCreate () method is called. The feed will never refresh 
once the app starts. Currently, the only way to get the app to 
refresh the feed is to exit the app and then restart it. 


TWis is OY\Vf a fovtion o*f 
i\\t -full AtiWi-by li-fctytlc- 

You cav\ -f'md 七 he Complete 
did^v-dm m *tKc ohlmc dots. 


You could override more of the lifecycle methods like 
onResume (), but that would only cover the case where the 
app is paused and restarted. You could also build some sort of 
auto-refresh mechanism, but that is very processor and battery 
intensive. Looks like the refresh button is a good idea after all. 
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start the layout 


In a single exposure, astronomers were able to 
confirm the existence of a supermassive black 
hole in the center of galaxy M84. They did this by 
using the Hubble Space Telescope's more 

powerful spectrograph to map the rapid rotation 


s a 9：26 

A Supermassive Black Hole 
Fri f 21 Jan 2011 00:00:00 EST 


NASA Daily Image 



Update the user interface 

A recurring Android user interface design pattern for 
on-screen actions, the button bar is a gray panel on the 
bottom of the screen holding one ore more buttons. This 
will work perfectly for the refresh button placement. 

Let’s build the button bar as a standalone layout and 
then add it the app’s current layout. Encapsulating parts of 
your fullscreen layout into separate smaller layouts can be a 
good way to organize layouts. And since Linear Layout 
extends ViewGroup, which itself extends View, you can 
add your entire new Li near Lay out you’re making for 
the button bar as a child to your original ViewGroup. 




■ 


f aCC 0 U ^ni^ 


4 


N«W 

contact 


M 

■ phone-only, un? 



，价 _ ev@gmi „ 


corn 




srne 


[ ~ll 

,, 


But-toh bav- Oh -the 

Add ih "tKc 

匕 。 app 


Button bar cm 

email sc 七 u? screen 


〜 y 

ba^kgvouhd 



me raora roiauon 


A \\ii\t spate 

七 c% 七扣 d 七 ^ 
button bar 


A little sf>a^e brbwe ⑶七 he button ar>d 

*to? bo*t*tom cJc button bav* 
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long-running processes 


Start with a basic LiwcarLayout 


LinearLayout is a surprisingly functional layout manager 
for basic screen designs. You’ve already built a few screens 
using LinearLayout, and you’re going to build the button 
bar with it too. You will learn more about LinearLayout 
in the process, and don’t worry; you will also learn about 
other layout managers later in the book. 


The key to using LinearLayout for the Button Bar is to 
center the refresh button using the android : gravity 
attribute. Then you can fine-tune the layout. 



button bav layout 邱七 
just a UmCNU” 七 
七 h a button. 


<LinearLayout 

android : orientation=’’horizontal' 
android : layout_width=”fill_parent” 
android : layout—height= 〃 wrap—content 

android : gr avi ty = rr center 

> 

<Button android : text =,, @string/refresh 

android : layout_width= 〃 wrap—content 
android : layout—height= 〃 wrap_content 
</LinearLayout> 


J\s\s is overkill, loctausc 

i\\t dc-faul-t, 

feut its 500a \p fee ▲ 



is 


You’re off to a great start! Now start fine-tuning the layout ... 
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layout properties 


Use properties to fuwc-tuwc the layout 

With the button properly centered in the layout, let’s focus on fine- 
tuning the layout to get the colors and spacing looking like the button 
bar examples. Use these properties to get the layout looking the way 
you want. 


padding 


Padding controls the spacing between Views 
within a layout. Use Density Independent 
Pixels (DIP) to specify spacing rather than raw 
pixels to make your layouts really flexible. 


android : padding= 〃 5dp 〃 




android : margin-top="5dp" 


margin 

Margin controls the spacing between this 
View and the Views outside this layout. Use 
Density Independent Pixels (DIP) to specify 
spacing rather than raw pixels to make your 
layouts really flexible. 



background 

The background property can be set 
to an image resource, a color, and 
a few additional Android graphics 
types. Use a solid color for the button 
panel background, which is defined 
in 8-digit hexadecimal format (two 
digits each for alpha, red, green ， and blue 


# FF 8D 8D 8D 

/ / \ 


lue 


Red 
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long-running processes 


layout-width and layout-height 


Layout width and height can be set to predefined values of 
wrap—con tent and fill_parent, as well as raw size 
values in pixels and DIPs. Using wrap—con tent makes 
the view just as big as it needs to be, while using fill 一 
parent sizes the view to fill all of the space it can. 




CoY\itY\i 

£ ⑸ .TW ,， ••七 f 
kc \ust as as \i to 
-fi-t 七 c 此 

Wsc -fo\r 七 he 

button bav-^s L*mca\rLayou-t 
width. This will make suvc 
tha-t -the layou-t s-tvc-Uhcs -fco 
七 he cdjcs o4* the sdvee^. 


ScJipI 这 t’s Cottiet 



Dehsrty Pixels (DIP) A^dv-oid suppo\rbs *fcoo 

sdrcch sizjCS *fco keep *t\r3dk/ Usih^ \r3v/ pi^cl dir^ehsiohs *m layou*U 
七 r^ake your layou 七 look ^ood ov\ ov\t divide dhd *tcv-\riblc ov\ 
o*tiicv-s. ^hdv'oid provides ^y\ ABSTRACT sizjh^ mc3su\rci^Ch*t 匕 dllcd 
Pc^siiy IhdcfChi Pixels -thai is derived -from device a*bbribu 七 es. 
TKis *tha-b you ddh dc-fmc layout a*bbribu*tes ih Dips 

will look ^\rC3*t ot\ dll A^dvoid divides. TKdhks, /\hd\roid/ 
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build the layout 



Button Bar Layout Magnets 

Construct the button bar layout using the magnets below. 

Think about the width and height for each the button and the 
LinearLayout. And don't worry; you'll have a few extra magnets 
left over for widths and heights you didn’t use. 


<Button android:text="@string/refresh A 



ttcv-c av-c youv- 


android:background= 〃 #ff8D8D8D' 


android : layout-height 二 


android:layout-width: 



<Button android : text= 〃 @string/refresh - 


android : margin-top= 〃 5dp" 




^/^mearLayou-h^ 


fill-parent' 
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long-running processes 




Now that you have the button bar layout, you need to add it to your screen. Below is a graphical 
representation of your current View/Layout hierarchy. Draw new views and layouts for the button 
bar Views (and any other views and layouts you need) to complete your layout. Also, remember, 
just like Scroliview that can have only one child, there can be only one root layout. 


layout without 
I the bu-fc-fcoh bav- 



fields \or 

-feed data 
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place the layout 


Button Bar Layout Magnets Solution 

You were to construct the button bar layout using the magnets 
below. Think about the width and height for each the button and the 
LinearLayout. you should have a few extra magnets left over for 
widths and heights you didn’t use. 



Sc 七 *0^ 

tolov 

{jo a wcd'iuw yrt’ 


android:layou V 一 1 

| ''fill-parent '、 

r 

android:layout-height= | 

| ''wrap-content'' 



Cejvtev* the 
bu-fc-feoh. 



TV y/\d*b^ »s sc-t -to -f ill 
pa 代此 so 1 七 Alls 七 ^ 
y/ 廉 o^C s ⑽”. 

丁 k height is set to 

it should^i be ihe 
+u " hci 9ht (siue ihe^re is 

also the s^oll^c). 


android : padding= 〃 5dp" 


L 


android : gravity=^center 



^_ 〆 /\dd some spading between *tKc 

butto 灼 panel dr>d sdv*oll 

Add some sp 把 mg d\rouhd the 

butfccm inside -the layoui. 



android : layout-width: 


CD 




wrap-content' 



Both 七 V^c Y/id*t^ and 
a^rc set -to 
d.ov>*bcy\*t) so 
七 he Wtto” Mil 

as vt y\ccds *to based 

oy \ button 七 0 七 


</LinearLayout> 
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long-running processes 



Now that you have the Button Bar layout, you needed to add it to your screen. Below is a 
graphical representation of your current View/Layout hierarchy. You were to draw new views and 
layouts for the button bar Views (and any other views and layouts you need) to complete your 
layout. 



The v-oo 七 
layout v/hidh 
has bo-th -the 
Sd\rolH/icw 
the 

butter bd\r 
3s dhildvm. 




The domflctc 
ovi^mdl layou*t is 
added as -the *(Vs 七 
cM\\A \/ic>w *fco 


VOO 七 L-nr>C3V - L-3YOU*t- 



The button bav- is 
added 七 he sctoy>d 
dk'ild (smdc *i*t should 
be displayed uy>dcv- 
-the SdvollV'iow)- 
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add the layout 


Update your app layout 

Add the button bar to the app layout in main. xml. Also, 
add the wrapper LinearLayout in the root, and add 
the button bar and the ScrollView to that layout. 



Update your layout in 
main, xml, adding the code 
for the button bar and the 
wrapper LinearLayout. 


layout 

<LinearLayout xmlns : android:"http://schemas.android.com/apk/res/android' 
android : layout_width= n f ill_parent▼▼ 
android : layout 一 height:'▼ fill_jparent n 
android : orientation= n vertical" > 



moved *to 




layout 


〈ScrollView -xnrifto : android L~bp . //jchcmaa . android. uumy^dpIvT' "led/ cLilU.1 u 丄 d/ 

android : layout width=〃fill parent" 



android: layout height:i-1—p-a-r-en 


<LinearLayout 


Wcijh-t -to v/\rap-do^-tc^i; A" 

oihc\rv/isc, it v/ould -fill ill 



<LinearLayout 

android : layout—width=’’f ill—parent” 
android : layout_height= 〃 wrap_content 〃 
android : background= 〃 #ff8D8D8D” 
android : layout_marginTop= 〃 5dp 〃 
android:padding= 〃 5dp 〃 > 

<Button android : text= 〃 @string/refresh” 
android : onClick=’’onRefresh” 
android : layout_width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 / > 
</LinearLayout> 

</LinearLayout> d — ¥七 



The 

but-fcoh bdv-y 
layout / 
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long-running processes 



Tost DriVq 


After you update your layout in main, xml, run the app to verify 
your layout updates. 


NASA Daily Image 

A Supermassive Black Hole 
Frl, 21 Jan 2011 00:00:00 EST 





And WHERE exactly is the 
button panel? All that time 
building it and \Ys gone?!? 


In a single exposure, astronomers were able to 
confirm the existence of a supermassive black 
hole in the center of galaxy M84. They did this by 
using the Hubble Space Telescope's more 
powerful spectrograph to map the rapid rotation 
of gas at the galaxy's center. The colorful zigzag 
provides the evidence. If no black hole were 
present, the line would be nearly vertical. The 
Space Telescope Imaging Spectrograph measured 



TV^c bav should 

Idc V)CV"C ••• 





There has got to be something going on here. The widths 
and height look OK, and the LinearLayout should be 
resizing everything... right? What could be wrong? 
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weight property 


Use LiwearLayoufs weight property 


Linear Layout lets you assign a weight property that controls 
the resizing behavior of its child Views. For the button bar, you 
want the button bar to be just as big as it needs to and then have 
the ScrollView fill the entire rest of the screen. 


Weights are defined using the android : layout_weight 
XML attribute and have a number value of 0 or 1. Using a 
weight of 1 makes the View stretch, while using 0 will make that 
View just as big as needed. 



Sdv-olll/icw 

dc-fih'rtioh 


<ScrollView 

xmlns : android=’’http : //schemas . android. com/apk/res/android > 
android : layout_width= 〃 fill_parent” 
android : layout_height =,, wrap content" 


android : layout weight =,, l 


ff 


/r 


Butt 0 灼 bav 


A v/cijht o( I -fills ihc 
w’rth jus 七 chough spade Ic-fi 
-fo\r -the bu*tfeor> bav*. 


<LinearLayout 

android: layout—width=’’fill_parent” 
android: layout—height=’’wrap—content 

android : layout 一 weight:’’ 0 〃 



^ wakes 

3s h 3s 

灼 ceded. 


Where do you find out about these properties? 

Ji A11 of the properties used here (and many, many more) are documented 

’ .1Y 丄 in the Android online documentation. To learn about more of these 

properties, look at the documentation for your specific layout as well as the 
，out tutorials. Do a quick search at developer.android.com, and you’ll get right to it. 
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long-running processes 



Tqst DriVQ 


Run the app again, and check that the layout weight modifications 
made the desired layout changed. 




\ 



Great work! 

The app is looking fantastic. Now just wire up the 
refresh button and you can show it to Bobby. 
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the refresh button 


Connect the refresh buttow 

You already have the feed-handling code working from 
Chapter 2. To keep your code clean and concise (and 
without duplicate code), move the feed-handling code to 
a new method called ref reshFromFeed () . Then 
you can call the same feed-processing method from 
onRef resh () and onCreate (). 


public void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

~r n trj[inndl — n r w T n trinnn rM r r ()' • 

TTTtdllandl^r. 

LDibplciy (lo^djrT ^Llidlei . gotTitlc , 


: Uj Ldllaiidlci . LDdLe ( 

"ToTOtlandlci-. gctUx-'l () , 

iotdllj rr^TerT ^e LDebu 上丄 pL 丄 uu ()) 

refreshFromFeed (); 



Move this dodc *to d 
y\v*i method called 
\TC-f\rCshF\romFccdO. 



Cdll V-C-fv-CshFv-omFccd 

-f\rom o^Cv*ca*tcO. 


public void onRefresh(View view) 
refreshFromFeed(); 




private void refreshFromFeed() { 

iotdHandler = new IotdHandler(); 
iotdHandler.processFeed(); 
resetDisplay(iotdHandler.getTitle (), 
iotdHandler.getDate (), 
iotdHandler.getUrl (), 
iotdHandler.getDescription()) 





Call the sdme \rC-fv-cshFv"omPecd -fvom 

the bu*t*toir/s Oir\Rc-fv*Csh0 method. 
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long-running processes 



Tesr DriVq 


Run the app again, and click refresh. This will update the app 
from the feed. 



NASA Daily Image 

A Supermasslve Btack Hole 
FrL 21 Jar 2011 00:00:00 E：ST 





吴 ml 


9:26 




_ _ — -| _ 

NASA Daily imase 

■■F ^JP 

A Super massive Black Hole 
FrL 21 Jan 2011 00:00:00 EST 


««!■ 





In a single exposure, astronomers, were able to 
confirm the existence of a supermassive black 
hole fin the center of galaxy MS4. They did thts b| 
using the Hubble Space Telescope's more 
oowerfuf soertrograoh to mao the raoFd rotatfori 


CUcW ’ 1 — h 


fyM 

■Br 


In a single exposure, astronomers were able to 
confirm the existence of a sypermasslve black 
hole In the center of galaxy M84. They did this by 
using the Hubble Space Telescope's more 
oowerfuf soectrograoh to mao the raoFd rotatfon 



Refresh 





Did the refresh 
work? I didn’t see 
anything change on 
the screen... 


Ko-th'mj happened 

oy\ the s^rcc 灼 . 


It’s not clear what’s going on here... 

Did the refresh work? Was the feed successfully processed? It’s 
totally unclear what exactly happens here when the user clicks 
on the refresh button. 
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the debugger 


Use the debugger 

The debugger is an incredibly useful tool for figuring out what’s 
happening while your application is running. The Android 
Eclipse plugin includes tools to seamlessly use the built-in 
Eclipse debugger to debug your Android apps，either in the 
emulator or even on a device. Follow these steps to debug the 
app and see whether ref reshFromFeed () is getting called. 



Set a breakpoint 

The debugger works by setting stopping points in your app 
called breakpoints. A breakpoint is like a scenic stop on 
a nice drive where you stop and take a look at what’s going 
on in that spot. 


o 


This isn’t intended 
to be a detailed 
debugger tutorial. 

There is just enough 
detail here to debug the NASA app. 
Take a look at the Android and Eclipse 
documentation for more tips on using 
the Eclipse debugger. 



Double - di 匕 k the 

yay -fco set 

a bircakpoiht. 




Launch the debugger 

The debug button is just to the left of the play button in the 
Eclipse toolbar. It uses the Android launch configurations you 
already set up. Press it to launch the debugger. 


cf 你 ▼ 、 li ； • ■ T 



Cl'itk *tWis *to 

lau^ dckiA^c^r. 


Tke ctetugfgfer 
automatically 
cteploys and 
attackes to your 
app (on tke 
emulator or a 
ctevice). 
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long-running processes 


o 


Monitor your app in the debug perspective 

The debug perspective is where you can see the state of your 
app running. (A perspective is Eclipse’s name for a stored 
collection of panels for specific work.) When you launch your app 
with the debugger, it will immediately hit a breakpoint, because 
onCreate () calls ref reshFromFeed (), which is where you 
set your breakpoint. 


This vicv/ shoy/s 
七 Wad s-tadk -tvadcs. 


TW,s W Java 

Java ^ V>atk ^ 

sta^ard todt 



啓 W 透 j 帑 ，0 ▼兔， 


妒 j 圖囹 j 


/ 


sbug S3 


味 [!► DD 圍 N 


3. ^ .(^ 




□ 




► Thread [<1> main] (Suspended (breakpoint at line 66 in Nasalotd)) 

= Nasalotd.refreshFromFeedO line: 66 
= Nasalotd.onCreate(Bundle) line: 29 

= Instrumentation.callActivityOnCreateCActivity, Bundle) line: 1047 
= ActivityThread.perform LaunchActivity(ActivityThread$ActivityCli€ntRecc 
= ActivityThread.handleLaunchActivity(ActivityThreadSActivitYCIientRecorl 
= ActivityThread.access$ 1500(ActivityThread, ActivityThreadSActivityClie 
= ActivityThreadSH.handleMessage(Message) line: 928 
= AaivityThreadSH(Handler).dispatchMessage(Message) line: 99 
= Looper.loopO line: 123 
= ActivityThread.main(String[]) line: 3647 


0 o 

M= Variables S3 

Name 


°o Breakpoints 


^ ^ Debug Java 

讳 El 


b inUrl 
B title 
s url 

mActivitylnfo 

mApplication 

mBase 

mBase 


Value 
false 

*Young Achievers" (id = 830007801480) 
-http://www.nasa.gov/images/content/512483main_ 
Aaivitylnfo (id=830007749440) 

Application (id = 830007767144) 

Contextlmpl (id=830007768224) 

Contextlmpl (id=830007768224) 


□ 


0 


功 Nasalotd.java SSactivlty.nnain.xm 1 

° □ 

public void refreshFromFeedO { 

iotdHandler ■ new IotdHandlerO; 
iotdHandler. processFeedO; 

卜 ■ 

Uo resetDisplay CiotdHandler.getTitleC) , 

iotdHandler. getDate(), iotdHandler. c 


P 

% puDLic voia onKerresn^view vievy ) t 

\ refreshFromFeedO ； 

\ 

」 ►' 


Outline £2 | a z 

* com.jonathansimon.nasa.iotd 


\ L 


□ 


This view shows 
you 七 he values 
of variables 
tliat a\rc \y\ 

sdopc- 


►it import declarations 
▼ © Nasalotd 

口 iotdHandler lotdHandler 
a dialog ProgressDialog 
#^onCreate<Bundle) : void 

resetDisplay(String. String, String, String) void 
p{String) Br mp 



功 Nasalotd.java ◎ \ jcf main.Kml □ - 


public void refreshFromFeedO { 

TiOtdHancn-dir = new lotdlHaindlerQ; 
liOtdHandier , processfeedQ] 



resetDisplavCi ctdiHand'. eir. getTi tleQj iotdlHflnd ， . er , getDateQ d iotdHand'. er. l 



} 



The a\r\ro>w "to the 
b\reakpom 七 mdita-fcov lets you 
khow ihc Ime y/as veadhed. 


So the line was reached... but how does the user know? 
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progress dialog 


Add a progress dialog 


The ProgressDialog is a utility that shows a modal 
progress pop-up with customized information for your app. 
ProgressDialog is perfect here, because you can show your 
users status, but you also keep them from repeatedly pressing 
refresh and successively triggering refresh after refresh. 

How do you show a progress dialog? 

Show a ProgressDialog by calling the static method show 
on ProgressDialog. The show method returns a reference to 
a ProgressDialog isntance. Make sure to cache the reference, 
as you’ll need it to dismiss the dialog when you’re done with it. 



Bits 


Modal means users can’t 
interact with the application 
at all. All user input will be 
ignored. 


This is the todt -to 

show a p\rog\rcss dialog.*^_^ 

Chahgc -the title a^d 
detail text as needed. 


ProgressDialog dialog = ProgressDialog.show( 
this , 

、 Loading ’’， 

‘Loading the image of the Day’’）^_ 


1 



Call dismiss on the dialog when you’ve completed all of 
your work and the dialog will go away. 


dialog.dismiss() 



Call "tWis *to dismiss 
d»alo^- 
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long-running processes 


^harpen your pencil 


Below is the ref reshFromFeed method with long-running 
code. Add the necessary code to show the ProgressDialog 
before the long-running work is shown. And remember to 
dismiss the dialog once the work is completed. 


public void refreshFromFeed() { 


Show the 
dialog hcv-c. 



iotdHandler = new 工 otdHandler(); 
iotdHandler.processFeed() ; 
resetDisplay(iotdHandler.getTitle (), 
iotdHandler.getDate (), 
iotdHandler.getUrl (), 
iotdHandler.getDescription ()); 



P'lSmlSS W\t 

dialog 

all 、 

v/ov-k is 
demc. 


you are here ► 


143 






add the progress dialog 


^iharpen your pencil 

Solution 


Below is the refreshFromFeed method with long running 
code. You were to add the necessary code to show the 
ProgressDialog before the long running work is shown. 
You should have also dismissed when dialog once the work is 
completed. 


public void refreshFromFeed() { 


Pvo^rcsspialo^ dialog Pro^v-csspialo^ showf 

this, 


w Load*m^ *the ima^e o-f -the Day w ); 



pv-ojv-css 

dialog 


⑷ ^dsic 

匕 。 de ^aihs 

u ^Whcd. 



iotdHandler = new 工 otdHandler(); 
iotdHandler•processFeed() ; 
resetDisplay(iotdHandler.getTitle (), 
iotdHandler.getDate (), 
iotdHandler.getUrl (), 
iotdHandler.getDescription()); 


didlo^disinn issO ； 



Dismiss 七 he pvo^vess 

strttY\, y\o^i that 
*tV>c y/ov*k is dor\t- 
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long-running processes 



Tost DriVq 


Run the app and click Refresh to verify that the Progress Dialog 
is working correctly. 


3G rfl 1 


NASA Daily Image 

A Supernnasslve Black Hole 
Fri, 21 Jan 2011 00:00:00 EST 


^ 3 ^ 


5 s - 


x mi m s：26 


NASA Daily Image 

A Super massive Black Hole 
Frl 21 Jan 2011 00:00:00 EST 


In a single exposure, astronomers were able to 
confirm the existence of a supermass^ve black 
hole in the center of gafaxy M84. They did this bj 
using the Hubble Space Telescope's more 
powerful spectrograph to map the rapid rotation , 





mm 




lVha*t? No dialog 
didcmoy 

Ad. 


In a single exposure』astronomers were able to 
confirm the existence of a ； supermasslve black 
hole in the center of galaxy M84. They did this by 
using the Hubble Space Telescope's more 
cowerfuf soectrograoh to mao the rapfd rotatfon 


Well that’s not good. 

The whole point of putting in the 
ProgressDialog was to have it show while 
the long-running feed-processing work is occurring. 
The dialog code is in the right place, but for 
some reason it’s not showing. What could be 
happening? 

The problem is in the threading... 
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ui thread 


dedicated Ul thread 


Android has a dedicated thread for updating the user interface (UI). It 
is responsible for repaints, layouts, and other graphical processing that 
helps keep the UI responsive and keeps animations smooth. The UI 
thread has a queue of work, and it continually gets the mot important 
chunk of work to process. 


U| "thv-cad 


Ppcv-fovm 

Refam 七 layout 七 

Sc*t 七作七 


Alovc UI wovk 






Z l 


TV>c U| *thv*cad 

•takes i*U wovk 


«5 


Why didn't the progress dialog display? 

The button action occurs in the UI thread by default. When the progress 
screen is shown, successive calls to repaint the screen are made to support 
the animation effect. But the process feed code also runs in the UI thread, 
which occupies the UI thread. By the time the UI thread could run the 
repaint code, the dialog was hidden. 


Siioy/ 
pv-oyess 



TK'is tall oy \ dal I 

/ ^ OY\ -the UI *thv-cad keeps 
v-cfa'm*U -fvom 


Pi f Re?ami — ui 邊， 

imMS\ 


i 


5 
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long-running processes 


How do you fix it? 

The solution is to keep non-UI work off the UI 
thread and all UI work on the UI thread. 


IXI "thv-cad 



UI Thread 

Only UI work 


Non-UI Thread 

Only non-UI work 


£V>o>w 
pv-oycss 
dialog 


y\c^n 

ihrtad b> 
cx.cdu*tc -feed ^ 


Hide 

Rcfa*m*t pv-o<\vcss 

d'.alo 5 Repamt 



Kc>w *tV>vcad- 
pv-otcss*m^ -feed 



U| y/ov*k 
queue 


Feed p\rodcss*mg 

dal I the 
U| 4h\rcad "to hide 
p\roj\rcss sd\rccr> 


Moving the feed processing work off the UI thread and onto 
a separate thread allows the UI thread to focus on repaints. 
The first repaint shows the progress dialog, and the successive 
repaints make the animation happen. Then, when the feed 
processing is completed, the new thread puts an item in the UI 
queue to hide the progress screen. This switch back to the UI 
thread is important, because the non-UI thread can’t hide the 
dialog, which is a UI component. 


Keep tke UI tkreact free 
oi expensive processing 
lor a responsive UL 
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new threads 


Spawn a wew thread for the long process 

The most straightforward way to get your long-running 
processing code on a different thread than the UI thread is to 
make an inner class extending Thread and implementing the 
run method inline. 

\ 

Thcvc avc abou 七 a million >ways *to 

s^vud'tuvc youv* dodc *to deal v/Vth "treads. "TKc 
^odl \\trc is^*t *to dcbaic bu*t *to ud 伙 siand 

hoy/ *bo y/ovk y/i*th 七 he /Wdv*o.id W| 七 hvedd. 


public void refreshFromFeed() { 

dialog = ProgressDialog.show( 
this, 

''Loading ”， 

''Loading the 工 mage of the Day ”）； 

• 七 end *tV>vcad- 

Thread th = new Thread() { ^ 

public void run() { ^ - (mplcmcht v-uh. 



Leave 七 his 

dodc OY\ U| 

七 hvead. 


r 


All o-f 

-fccd- 

pvotcssm^ 
^oes oy\ 
*thv*cad- 


th.start(); 


if (iotdHandler == null) { 

iotdHandler = new 工 otdHandler(); 

} 

iotdHandler.processFeed(); 
resetDisplay( 

iotdHandler.getTitle (), 
iotdHandler.getDate (), 
iotdHandler.getUrl (), 
iotdHandler.getDescription()); 
dialog.dismiss(); 

Do〆 七 -fovyt *to stairt 
youv *thv-cad- 
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long-running processes 




Tost DriVq 


Run the app again, now with the expensive feed-processing code 
moved to the new thread. The dialog should show... but when you 
run the app, you will see an error. 



You II see tw.s dialocy 

you r\AY\ *bV^c 


FATAL EXCEPTION: Thread-11 


cv~v~ov~ 
des£v»ip 七 j 0h 


view.ViewRoot$CalledFromWrongThreadException : Only the original 
thread that created a view hierarchy can touch its views. 

_ _ _ 一 

at android, view. ViewRoot. checkThread (viewKoor.. j ava : 2 

at android.view.ViewRoot.requestLayout(ViewRoot.java:629) 
at android.view.View.requestLayout(View.java:8267) 


What’s the problem? 

The problem is the dismissing of the Progress Dialog. 
Properly managing your work on and off the UI thread 
means not only getting expensive work off the UI thread, 
but also making sure that all necessary UI code occurs on 
the UI thread. 
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the handler 


Use Bawdier to get code oh the Ul thread 

The dialog . dismiss () call needs to get back on the UI thread. 
Getting off of the UI thread is a cinch by creating a new thread. But 
that thread doesn’t have a reference to the UI thread to get code to 
execute back on the UI thread after the expensive work. That’s where 
Handler comes in. 

Handler works by keeping a reference to the thread it was created by. 
You can pass it work and Handler ensures that the code is executed 
on the instantiated thread. (Handler actually works for more than 
just the UI thread.) 


Start by instantiating a handler from the UI thread 

The onCreate () method is called from the UI thread. Instantiate 
the Handler there, so you can get work back on the UI thread later. 



七 k Nasalo-td 


Handler handler 


Cadhc a tta^dlcv as a 

member variable, so you do^*t have *to 
cxt^t tta^dlcvs ovcv av>d ovcv 


public void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity main); 


oXrtaitO 
cm 七 he Wl 七 WrCdd. 


handler = new Handler (); 合 

refreshFromFeed(); 


Sihdc ohC\rcalcO executes ih WI 
七 hlread ， "tliC lidhdlc\r hcV'C 
a hahdlcv with the ability io 
todc Oh "tKc UI "til\rC 3 d- 




Pass work to the Handler using post 

Once you have a Handler instance, you can call post, passing it a 
Runnable to execute on the desired thread. 


TWts is a sta^dav-d 
RwymaWc, ” 。七 

j\Ysd>ro\d i 乙 . 


Get ready to fix ref resh From Feed () with correct threading... 
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long-running processes 




Hanctter Magnets 

Use the magnets below to complete ref reshFromFeed () with all of 
the necessary threading changes. The expensive feed-processing code 
needs to execute on a new thread, and the call to dismiss the dialog has 
to happen on the Ul thread using Handler. Assume the Handler was 
already instantiated for you in onCreate (). 


rtcv-c av-c youv- 
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adding a handler 


〆 i 


Handler Magnet Solution 

You were to use the magnets below to complete ref reshFromFeed () with 
all of the necessary threading changes. The expensive feed-processing code 
should be executing on a new thread, and the call to dismiss the dialog should be 
executing on the Ul thread using Handler. Assume the Handler was already 
instantiated for you in onCreate (). 


dialog = ProgressDialog.show(this, 

''Loading^, ''Loading the Image of the Day A, ); 


TKc dialog is ddlled -fv-om 

七 lie WI -tKvcad (>whcv-c 
vc-fv-csKFv-orwFccd is tailed 

-fvom). 


Stavt a hew 
thv'cad -Po\r 
the adiual 
-Peed dode. 



if (iotdHandler == null) { 

iotdHandler = new IotdHandler() 



handler.post( 

1 一 



new Runnable 

0{ 



public 

void run() { 


Call vcsc*tP*isplay 

av>d dismiss 
dldlo^ -fvom U| 

七 hvead. 



resetDisplay(iotdHandler.getTitie(), 

iotdHandler•getDate(), iotdHandler.getUrl(), 
iotdHandler.getDescription ())； 
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long-running processes 




Tqst DriVQ 


Now run the app and you’ll see the progress screen show while the 
app loads from the feed during onCreate () . You’ll also see the 
the progress screen show when you click the refresh button. 



Start the app. 


Loading 





❺ 


Give the app a few 
seconds to load the feed. 



0r\ app s*tav*tuf, 
七 he pvoycss 
dialog y/*ill sV>o>w 


Wo p\rog\rcss dialog 

how that the -Peed 

pvodcssihg is Complete. 


o Watch the progress 
dialog get hidden. 


NASA Daily Image 

A Supermasslve Black Hole 
Fri, 21 Jan 2011 00:00:00 EST 


At 




In a single exposure, astronomers were able to 
confirm the existence of a supermasslve black 
hole in the center of galaxy M84. They did this by 
using the Hubble Space Telescope's more 
powerful soectrograoh to mao the raofd rotation 


Refresh 


Great work! 


Now your users know that the app is doing 
something. Positive reinforcement goes a long way! 
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another enhancement 


o 


0 



Don’t get me wrong, looking at 
the daily image is pretty cool... but ifs 
so fleeting. I'd love to be able to save 
a particularly cool picture as my home 
screen wallpaper, so I can look at it later. 
Could you pull that off? 


4j 



This shouldn’t be too hard. 

It’ll be a snap to update the wallpaper. You’ve 
already got the image from the feed, so you just 
need to make the call to set the wallpaper using that. 
And you’ve already got a button bar layout in place, 
so you can just add a second button to the bar. 
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long-running processes 


The code 

You can set the wallpaper by retrieving 
the WallpaperManager and 
setting the wallpaper by Bitmap. 
You’ve already got a reference to the 
Bitmap coming from the feed, so this 
should be a piece of cake. 



Reaps Baw 

■V 

Ope 


广 TK'is is Code *to 

[ anally set tKc wallpapcv- 


WallpaperManager WallpaperManager = 

WallpaperManager.getlnstance(this); 
WallpaperManager.setBitmap( bitmap ); 


— 


>u da 灼 pass *thc 
brtmaf you decoded 
-fvom -feed 



“This" v-c-Pcv-s -fco ihe 


The design 

You already built the button bar to 
house the refresh button. And that 
is an ideal place to add a button to 
set the wallpaper. (More than two 
buttons in the button bar could be a 
problem if the button text is two long, 
but these two work great.) 



NASA Daily Image 

The Early Cosmos 
Mon 」 24j an2 fm 00:00:00 EST 




Y\ 


Bobby’s going to love this! Let’s get started 
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set the wallpaper 


Add the "Set Wallpaper" button 

The button bar is built with a LinearLayout, so you can just 
add the new Set Wallpaper button directly to the button bar layout. 
Linear Layouts are horizontal by default, so you can add the 

android : orientation= "horizontal" or simply rely on the 
default. 

Add the new button to the buton bar layout in main, xml: 


<LinearLayout 

android : orientation= 〃 horizontal" 

android : layout—width=”fill—parent” 
android : layout—height= 〃 wrap_content 〃 
android : layout—weight= 〃 0 〃 
android : gravity= 〃 center 一 horizontal” 
android : background= 〃 #ff8D8D8D” > 

<Button android : text= 〃 @string/refresh” 
android : onClick=’’onRef resh” 
android : layout—width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 / > 

<Button android : text= A, @string/setwallpaper i 
android : onClick= 〃 onSetWallpaper 〃 
android : layout_width= 〃 wrap—content" 
android:layout_height= 〃 wrap_content 〃 /> 

</LinearLayout> 


Lmcav*Layout dc*f3ul*ts *to 
KoV"izjOK\*t3l lou 七 

*,Vs a ^ood idea -to ’mdude 
ovie 山 W atbribute 
a^yy/ay. I*t makes y ouv " 
C3SICV" *to ur\dcv*s*t3\r\d l3*tcv- 
ar\d fv-oftc^*b you m ^asc 
dic*faul*b Aa 呼. 


Add the 

but-fcoh as -the 
sedohd dhild ih 
the bu*ttoh bar 
layout. This 
will add it -to 

the Hght 

the \rc-P\rcsli 
bu-fc-fcoh. 


Update strings.xml adding the new string for the Set Wallpaper button: 
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long-running processes 


Update the activity for the button action 

The feed-processing code already downloads the image from the 
URL and creates a Bitmap from the web resource. To complete 
onSetWallpaper (the onClick call declared in the layout), 
cache the Bitmap once decoded and pass that image to the 
WallpaperManager. 


public class Nasalotd extends Activity { 
private 工 otdHandler iotdHandler; 
ProgressDialog dialog; 

Handler handler; 

Bitmap image; 



Make a rwembev- vaH^ble 
-Pov- the bitmap. 


jr 




iotdHandler.processFeed(); 

=getBitmap( 
iotdHandler.getUrl()) 


image 

A 


S-to\rC the bitmap ih the 
linage variable 

pvo^ssihg i\)t -feed. 


Add the onSetWallpaper method to your activity in Nasalotd. j ava : 


public void onSetWallpaper(View view) 
Thread th = new Thread() { 



Sc-ttmg the wallpapev* 

乙如 9 while, 

so kidk a hew 
thread -to get it off 

the -thread- 


th.start (); 



public void run () { 

WallpaperManager WallpaperManager = 

WallpaperManager.getInstance(Nasalotd•this) 

try { 

WallpaperManager.setBitmap(image); 


Sihde the duirv-Cht sdopc 
is ihhev- dlass ； you 
^ jet a \rc-Pc\rChdC io 

“this' by pv-^cdih 0 i-t 
with the class 


catch (Exception e) { 

e.printStackTrace(); 

} ^ Tiiis y/ill do a 

de-fault duw>f *bV^c 

bo L^Ca 七， 
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test the wallpaper 



Tesr DriVq 


Run the app to make sure the Set Wallpaper 
button is correctly configured in the layout. 



Da this! 


First check that the button 
displays correctly... 


f 8:49 


NASA Daily Image 

The Early Cosmos 

Mon, 24 Jan 2011 00:00:00 EST 




Stars are forming In Henize 2-10, a dwarf 
starburst galaxy located about 30 million light 
years from Earth, at a prodigious rate, giving the 
star clusters in this galaxy their blue appearance. 
This combination of a burst of star formation and 


I I 


丁 he but-fcoh is displdyi h 0 
ho\rizx>y)-f^Hy 
posiiio„ed hcxt -to -the 


Setting the wallpaper requires a 
uses-permission element 

with android. permission. 
SET—WALLPAPER. Set this now 

in AndroidManifest. xml before you 
run the app. 


The button looks good. Now 
check and see how it works! 



1 8:49 




NASA Daily Image 

The Early Cosmos 

Mon, 24 Jan 2011 00:00:00 EST 



v: 


% 








Stars are forming In Henize 2-10, a dwarf 
starburst galaxy located about 30 million light 
years from Earth, at a prodigious rate, giving the 
star clusters in this galaxy their blue appearanc 欠 
This combination of a burst of star formatift^an' 


I 
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long-running processes 



What? Nothing 
happened. I clicked Set 
Wallpaper and now the 
app is just sitting there! 


The button did actually work, but... 

If you go to the home screen, you’ll see that the wallpaper was 
in fact set to the feed image. That said, the user experience 
is aweful'. Remember that getting your app working is just one 
part of bigger picture. In order to make successful apps that 
people want to use (and that will make you bags of money on the 
Android market!), you need to have a fantastic user experience. 



The issue here in setting the the wallpaper is that the change is 
happening off screen away from the user’s view. What you need is 
some positive reinforcement so your users know it worked. 


You could just show a ProgressDialog while the 
wallpaper is being set, but there’s a better way. 


Clidk Oh the home ahd y ou w 

that ihc wallpapcv was i h hei 

气 io the mh 4 c d i 

deal with -the useir … 


linage. /Vow -fco 
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use toast 


Use toast to give users reiwforcemcwt 

You could show a progress screen while the wallpaper is 


being set. But one of the inherent features of the progress 
screen is that it blocks users from doing anything. This is 
great when the feed is loading, because you want to block 
your users from interacting with the app. (This is what 
keeps users from repeatedly clicking on refresh.) 

But setting the wallpaper is different. You want to make 
sure to notify your users when the wallpaper is set, but 
you don’t want to keep them from doing something else 
in the app. For example, it would be perfectly acceptable 
for the user to set the wallpaper and to scroll down to view 
the long description while the wallpaper is being set in 
the background. This wouldn’t be possible if you used a 
progress dialog, because it blocks all user interaction. 


Toast 

_ passive 

notifications 

Progress Dialog 

=active , blocking 
notifications 


Android provides Toast for just such occasions 


Toast is a passive, non-blocking user notification that shows 
a simple message at the bottom of the user’s screen. A 
toast typically displays for a few seconds and disappears. 
Meanwhile, the user can still completely interact with the 
application. Here is what the app would look like with a 
Toast message when the wallpaper is set and the code to 
make it happen. 


Pass ih youv 


3 匕 "tivity. 


Toast.makeText(this , 

''Wallpaper set 〃， 

Message Toast. LENGTH 一 SHORT) • show () 

Time *to display 
■tiic -toast 


七 e % 七 






10:00 


NASA Daily Image 

The Early Cosmos 

Mon, 24 Jan 2011 00:00:00 EST 


省 ' • 


Stars are forminglrsVnlze 2-10, a dwarf 
starburst galaxy locate! about 30 million light 
years from Earth l 1 讲掛 update, giving the 

star clusters in Wallpaper set l e appearance. 
This combinatio^^BWP^^W*©r formation and 


I Refresh Set Wallpaper | 

1 — 
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long-running processes 




Complete the onSetWallpaper method below adding two Toast notifications: one for 
success and one in case of failure in the catch block. The Toast call must be made from the 
Ul thread. Use the Handler reference cached previously to make both of the toast calls on 
the Ul thread. 


public void onSetWallpaper(View view) { 

Thread th = new Thread() { 

public void run() { 

WallpaperManager wallpaperManager = 

WallpaperManager•getlnstance(Nasalotd•this); 

try { 

wallpaperManager.setBitmap(image); 


Aaa todt 
•to dv-ca-tc toast 


wessay 


•fov 





} catch (Exception e) { 

e.printStackTrace(); 


Add a {oasi message ih 
仏 c ubM blo^k with the 
u £^ov- settiha 




}}}； 

th.start (); 
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check the toast 



You were to complete the onSetWallpaper method below adding two Toast notifications: 
one for success and one in case of failure in the catch block. The Toast call must be made 
from the III thread. You should have used the Handler reference cached previously to make 
both of the toast calls on the Ul thread. 


public void onSetWallpaper(View view) { 

Thread th = new Thread() { 

public void run () { 

WallpaperManager wallpaperManager = 

WallpaperManager.getInstance(Nasalotd•this); 


try 




Wsc -the hdhdle\r {jo 

post ^ruhhablcs -fco 

Ul -thread. 


wallpaperManager.setBitmap(image); , . ,. . i 

— 以⑽ 

Rubble 0 { 厂 U A 如 

public void \rur\0 i | 

Toast makc7c%*tWasa|o*td.*this, 

^l/Vallpapcv- se*t' 

Toast.L 酬 Ttt S_T).W); 




/V]akc a 
•toasi 



catch (Exception e) { 

e.printStackTrace(); 

Rurmable 0 { 

public void vuhO { 

Show ano-tV^cv- -toast i-f - ^ Toast rwakcTc^Nasalo-td.-this, 

釙似 is 

ToastLEN^Ttt_SttORT).showOj 

}})； 


}} }； 

th.start(); 


162 Chapter 3 







long-running processes 




Tqst DriVQ 


Run the app and click the Set Wallpaper button. Now you will see the 
wallpaper set and a nice toast conformation that lets you and your users know. 



iH Belt \\L 

■rU 


aper 


Set Wallpaper" 




The Early Cosmos 

Mon, 24 Jan 2011 00:00:00 EST 


Refres 


10:00 


NASA Daily Imagef 

The Early Cosmos 

Mon, 24 Jan 2011 00:00:00 EST 


Stars are forming In Henfize 2-10, a dwarf 
star bur st galaxy located about 30 mHiion light 
years from Earthj at a prodigious rate, giving the 
star dusters In this galaxy their blue appearance 
This combinatron of a burst of star formation ant 




Stars are forming Henlze 2-10, a dwarf 
starburst galaxy located about 30 mnllllon light 
years, firoinn Earl/ ' j^lvln^ the 

star clusters In Wallpaper set ^^ppearance.' 
This combfnatio formation and 


NASA Daily Image 


The iossi 
^oh-Pi^atioh 

displays shoirtly 
-the 


Fantastic work! Bobby and all of his friends are going to love this! 
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user feedback 




o 


O 



■111 



The app rocks... you totally came 
through! I think ifs time to share this 
with more people than just my friends, 
though. Can you get it on the Market? 


Sounds greats Next stop... the Android Market! 





You II have ihc app 

“P 咖 the market ih the 

七 虬咖 . Siay t Uhcd / 


ariD^oo 

j market 
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long-running processes 



Your Android Toolbox 

With proper threading and user 
feedback, you can guarantee 
your users a responsive app 
with a rock solid user experience. 


TV^c Ul TVcad 

c^sive >work ^ iV>e 

o^crVisc, rcsfo^ivc^css <A the 
V/lll suWcv-. 

@ Make sure all Ul ^ oddurs o,l Y of e 

Ul -tWcad. Call'll w l CoAt ^ 
breads V/.II tWovz tWou^out 

youv* 6odc* 


^ ivc y owr usc\rs -feedback 

參 Toasi ： Use ioasi h> passively display a 
message "to youv- usc^s 

^ P^essDialo 9 ： Use a P^essDialoa 
whe, you {o blck use, aj 

display a ^cssa 9 c ahd ^oyress Oh the 

s^lrcch. 




BULLET POINTS 


■ 


■ 


■ 


■ 


■ 


■ 


■ 


■ 


■ 


■ 


Use extended properties of 
LinearLayout to fine-tune your 
screens (padding, margin, 
background, gravity, and more). 

Define layout width and height using 
fill 一 parent and wrap_content. 
Use fill—parent to maximize the size 
to fill the parent. Use wrap—content to 
make a View just as big as it needs to be. 

Use Density Independent Pixels (DIPs) 
when you need to define sizing or 
dimensions. This will ensure your layouts 
work on the most possible number of 
devices _ 

Layouts can nest (you can add layouts as 
Views to other layouts). Just remember 
that too much nesting will slow down the 
layout and rendering of your screens. So 
use nested layouts with caution. (You’ll learn 
strategies for this in later chapters.) 

Use the debugger to trace code in the 
emulator or a device. 

Use a ProgressDialog to block users 
and display progress. 

Use Toast to passively notify users of 
progress. 

Both Toast and ProgressDialog 

can be extensively customized for your app. 

Keep expensive work off the Ul thread, and 
Ul work only on the Ul thread 

Use Handler to add Ul work to the Ul 
thread's queue from non-UI threads. 
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5 multiple deVice support 

^ Run your app everywhere ♦ 



You ladies 
better start 
paying attention 
to the game. I just 
beat you both. 


Tell me about it! The 
last app I downloaded 
looked just awful on my 
cute little screen phone 


I hope this new app 
youre talking about 
supports my fancy new 
high resolution phone. 


There are a lot of different sized Android devices out there. 

You’ve got big screens, little screens, and everything in between. And it’s your job to 
support them all! Sounds crazy, right? Right now you’re probably thinking l How can I 
possibly support all of these different devices?" But with the right strategies, you’ll be 
able to target all of these devices in no time and with confidence. In this chapter, you’ll 
learn how Android classifies different devices into groups based on screen size as well as 
screen density. Using these groups, you’ll be able to make your app look great on these 
different devices, and best of all, with a manageable amount of work! 


this is a new chapter 
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sharing the app 


Pobby and all of this friends love the app! 

Bobby has been using the NASA image app all 
around schools and his friends have all been 
asking him for a copy. 


O 

0 


All my friends love 
my app and want to use it 
too! Can you publish it on 
the Android Market? 



Sounds great... but how about a 
limited audience? 

If Bobby and all of this friends want the app, 
likely others would too. And the place to share 
Android apps with everyone is the Android 
Market. But you would like to test the app out 
a bit before publishing it for the world. So you 
decided to do 

You installed the app on Bobby’s phone using the 
direct ADB install, but you can’t do that with all 
of Bobby’s friends since you don’t have access to 
all of their phones. 
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multiple device support 


Caw you share the app without using the market? 

Sure! You can publish the apk on any Webserver. 

Then anyone can download the app by navigating 
to the hosted APK on their Android device. 



Upload your APK to a Webserver 

You can upload the APK to any Webserver. You can find the APK 
in your project’s bin directory and transfer it to your Webserver. 
(Note: You’ll need to add the mime type application/vnd. 
android. package-archive for the . apk extension or have 
your web administrator do this for you). 




Navigate to the URL on the device 

Anyone who wants to install the app can navigate to the URL 
of the hosted APK from the browser on their device. This will 
download and install the app for them. (Note: Each user will have 
to configure the ‘Unknown sources; setting to allow non-market 
applications on their device). 



Let’s get some of Bobby’s friends to download the app... 
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getting feedback 


Lef s see what Pobby's fricwds have to say 

Bobby got a bunch of his friends to download 
the app over the air and play with it for a few 
days. Most people were pretty happy. But two 
of his friends, Jesse and Shawn, came back 
with some great suggestions for improvement. 


NASA Daily Image 


Those buttons 
just seem like a waste 
of space. I want to see 
the space images! 


0 


0 




Jesse 






Jesse's wants to see more of tiie 
image in landsc^e mode 

Jesse has a phone with slide-out keyboard, which 
forces the app into landscape mode. Technically it 
works, but Jesse doesn’t like how much vertical space 
the buttons are taking up. She would love to see more 
of the images instead of those buttons... 
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multiple device support 


Shawn wants small screen phones 
to show more of tiie image too 

Shawn has a really small phone (300x350 pixels to be 
exact). Like Jesse, shawn thinks the buttons on the 
bottom are a waste of space on his extremely small 
phone. He’s love to see those buttons moved somewhere 
too. 



Shawn also pointed out tiiat Ae liome 
icon is pretty boring... 

Android uses a default icon on the home screen. It’s pretty 
boring though. Shawn really thinks you should update it 
to make the app look more polished. 




T~Kc lior^c idoh 
is bo\rih^. 
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getting a handle on the issues 


So many devices, and so many issues! 

You knew there are all kinds Android devices out in the 
wild with different sizes and resolutions. But with such a 
simple layout, who would have though there would be so 
many issues? 

Some of the issues are also device specific 

Jesse and Shawn both have suggestions for improving 
the app in landscape mode and for really small screened 
devices. But you don’t want to change the regular app in 
portrait mode. The app you built at the end of Chapter 4 
still works great for those devices. 


Is there a way we can make 
everyone happy? Leaving the app as 
is for portrait mode, but updating 
it for landscape and small phones? 


On Android, you can make 
changes just for specific devices! 

With all of the different device shapes and 
sizes in the vast world of Android devices, 
you’ll often need to customize your apps 
for a few devices, like really big, or really 
small screens. Luckily, Android provides a 
mechanism for using a default layout and 
overriding those layouts for specific devices. 
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multiple device support 


Make a plan 

Making your app work on all kinds of Android 
devices takes some careful planning. In the case 
of the NASA Image of the Day app, Bobby’s 
friends tested it out on all kinds of different 
devices and you’ve narrowed down just a few 
cases where you need to improve. 


Here’s what you’re going to do to get this app market ready in no time! 


Update {ke layout for landscape mode 

You can solve Jesse’s problem by creating a special layout for 
landscape mode. This way, you can leave the regular portrait 
screen as it was and make adjustments for the landscape version. 



Optimize 

i\\t aff -fov- 

mode 


Update {ke layout for small screens 

Shawn brought up a good point that the buttons are wasting 
space on small screens. But just like landscape mode, you want 
to be able to leave the regular layout alone and just make the 
modification for small screens. 



Make look 

bettev* cm v-cally 

smdll S^\rCCir\S. 


Update {ke icon 

Shawn also pointed out the boring default Android home icon. 
Since you’re goal is to get the app Android-market-ready, let’s get 
that fixed while you’re at it. 



/Wake a 

Coo\tY i 乙 oh. 


Turn tke page to get startecH 
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replicating landscape mode 


Preview landscape mode m your emulator 


The first issue to address is the lack of vertical 
space in landscape mode. But before you can 
fix anything, you need to be able to duplicate 
the issue reported by your users in your own 
development environment. In this case, you need 
to be able to view the app in landscape mode. 

You can do this in any running Android 
emulator by pressing CT RL F12. 



Press CTRL — FI2 to switch 
your emulator between portrait 
and landscape modes. 


5556:CooglcAPI10-WVCA800 


x || B 3：03 


NASA Daily Image 

GRAIL Heads to the Moon 

Sat 10 Sep 2011 





Fire and smoke light up a blue sky as a United 
Launch Alliance Delta II Heavy rocket propels 
NASA's Gravity Recovery and Interior Laboratory 
(GRAIL) mission into space. Liftoff from Space 
Launch Complex 17B on Cape Canaveral Air Force 
Station in Florida was at 9:08:52 EDT Sept. 10. The 
spacecraft are embarking on a three-month 
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0 0^0 


dhd 

仏 C Ciy\ul3{jo^ 
6 o ^o\s swii^h 
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勹酉 a 


5556:CoogleAPI10-WVGA800 


3:04 


1 

2 

3| 

4 

5 

6 

7 

8 

0 

0 

Q 

W 

E 

R 

T 

Y 

U 

I 

0 

P 

A 

S 

D 

F 

G 备 

H 

J 

K 

L 

DEL 

<3 


z 

X 

C 

V 

B 

N 

M 




SYM 


» 1 

WW^ 


Q O O 


6 




© 


174 


Chapter 5 














































multiple device support 


Update the design for landscape mode 

The main issue with landscape mode is the 
buttons. With the button bar gone, you’ll gain a 
lot more vertical space to show the day’s image. 

Put where could you put those buttons? 

There are a number of different solutions, but 
let’s move the buttons to the top right of the 
screen in line with the title and date. This will 
keep most of the screen as is and move the 
buttons where there is currently blank space. 


Ws 娜 


NASA Daily Image 

GRAIL Heads to the Moon 


Sat, 10 Sep 2011 






You II gam all o-P this 

syau by movih^ 
"the bu-fc-fcohs. 0 y \ this 
"this is almost Ohc -fi-Pth o-f 
the Ch-tivc sfivcch height/ 


But kow cto you ckange tke layout 
just lor lanctscape mocte? 
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adding a special landscape layout 


Create a landscape layout with the wizard 

You can created new layouts using the New Android 
XML File wizard. This wizard isn’t specific to layouts, you 
can use it to make all kinds of different Android XML 
resource files. Launch the wizard by going to File New 
—Android XML File. 

The project will be filled in for you. Select the “Layout” 
radio button as the resource type and enter “main.xml” 
as the file name. Then for the folder enter “/res/layout- 
land”. This will automatically add “Landscape” as a 
Chosen Qualifier. 


Mew Android XML FNe 


Make su\rc 
Vou\r f\roje 乙七 》s 


New Android XML File 

匚 reates a new Android XMJL file. 




&vte\r ma'm. 

the -Pile 







What type of resource would you (ike to create? 

0 Layout O Values 

Cj Color List A" nritor 

O Preference O Searchable 

What type of resource configuration would you like? 

Available Qualifiers 
^Country Code 

(iD Network Code 
^ Region 

Smallest Screen Width 
Screen Width 
5creen Height 
El^ize 
ai Ratio 
具 Ul Mode 
Night Mode 
Rpjl Density 
[^Touch Screen 
Keyboard 

liiil Tpift Irmjt_ 


0 Drawabte 
0 Animation 
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multiple device support 


Where is the layout? 


The new layout you made is named the same as 
your existing layout, but your new layout is in a 
parallel directory called layout-land. This special 
construct allows the Android runtime to determine 
the best layout based on the device’s state. 

If the device is in prortrait mode, it loads the layout 
at / res /layout/main . xml. And if the device 
is in landscape mode, it loads the layout at / res/ 
layout-land/main . xml. This doesn’t require 
any code changes to your Activity since both 
resources are still referenced by the same R constant 
at R. layout. main. 

ttcv-c is oy\Cv"ca*tcO 

method -fv-om Nasa|o*td- 




； ava. T\\t R do^s*ta^*t m 


public void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.main); 
handler = new Handler (); 
refreshFromFeed(); 


"the device 
is ih poirbrait 
^odt, -the 

layou-t 
wil] be loaded. 


Tke layout you just createef starts 
out empty … time to Luilct it out! 



Nasalotd.java 
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building the landscape layout 



Landscape Layout Magnets 

Since the portrait and landscape layouts are so similar, a good 
starting place is to copy and paste the layout. But some things will 
have to change too. Below is the copied beginning and end of the 
layout. Use the magnets below to complete the layout with the 
buttons on the top right of the screen. 


<?xml version= M 1.0 M encoding= M utf-8 M ?> 

<LinearLayout xmlns : android= M http :// schemas.android.com/apk/res/android" 
android : orientation= M vertical" 


android : layout—width= n fill—parent n 
android : layout—height= n fill—parent 



TWis *«S rooi 



Wert avc some 



Wtrt arc 

some MORS- 





<Button android: text:’’@string/refresh’’ 

android:onClick=”onRefreshButtonClicked’ 
android : layout 一 width:’’wrap_content’’ 
android: layout_height=’’wrap_content" 
android:id= ,, @+id/refreshButton" /> 

CLinearLayout 

android:orientation= M vertical M 
android: layout_width= M wrap_content' 1 
android : layout 一 height= n wrap_content n 
android: gravity:’’ left" 
android : layout_weight= M 1 n > 


CLinearLayout 

android : orientation= 〃 horizontal” 
android:layout 一 width="fill_parent" 
android : layout_height=’’wrap_content' 
android:gravity:"left" > 

<TextView 

android : id="@+id/imageDate" 
android : layout_width="fi1l_parent" 
android:layout_height="wrap_content n 
android : textSize="10dp" 
android:layout marginBottom= n 5dp M /> 
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multiple device support 


<Button android : text="@string/setwallpaper" 
android:onClick= M onSetWallpaper M 
android : layout_width="wrap_content M 
android : layout_height= M wrap_content' 
android : id= M @+id/setWallpaperButton' 


> 


<TextView 

android : id= M @+id/imageTitle" 
android : layout_width= M fillj>arent M 
android:layout_height= M wrap_content" 
android:textSize= M 20dp" 

android:textColor= M @ color/image_title_color' 
android : layout marginTop= M 5dp" /> 


<LinearLayout 

android:orientation= M horizontal" 
android:layout_width= M wrap_content" 
android : layout_height= M wrap_content" 
android:gravity= M center_vertical" 
android : layout_weight= M 0 M 
android:layout_marginTop="5dp M > 




The S^roll\/iew 
3hd its ^Oh"tch"ts 
V-Cr^aih 


<ScrollView android : layout—width= n fill 一 parent n 

android : layout_height= M wrap_content M android : layout—weight= n 1 
<LinearLayout android:orientation="vertical" 
android : layout_width="fill_parent" 
android : layout—height=' ， wrap_content n 
android : gravity= ， 'center—horizontal" > 

<ImageView android : id="@+id/imageDisplay" 
android : layout—width= n wrap—content” 
android : layout_height= M wrap_content M 
android : layout_marginBottom= n 5dp" 
android : adj ustViewBounds = M true" / > 

<TextView android:id="@+id/imageDescription" 
android : layout—width= n wrap—content ’， 
android : layout_height= M wrap_content M / > 
</LinearLayout> 

</ScrollView> 


> 


</LinearLayout> 
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building the landscape layout 



Landscape Layout Magnet Solution 


Since the portrait and landscape layouts are so similar, a good 
starting place is to copy and paste the layout. But some things will 
have to change too. Below is the copied beginning and end of the 
layout. You should have used the magnets below to complete the 
layout with the buttons on the top right of the screen. 


<?xml version= M 1.0 M encoding= M utf-8 M ?> 

<LinearLayout xmlns : android= M http :// schemas.android.com/apk/res/android" 
android:orientation= n vertical" 


android : layout—width= n fill—parent n 
android : layout—height= n fill—parent n > 


<LinearLayout 

android : orientation= 〃 horizontal 〃 
android: layout_width=”fill_^parent” 
android : layout_height=^wrap_content' 
android:gravity:"left" > 


TVis is a hovizjoh-t^l 
layout -Pov the 
Civtilrc 


<LinearLayout 

android : orientation="vertical" 
android : layout_width= M wrap_content M 
android : layout_height= n wrap_content” 
android:gravity="left" 



is a vcv-ti^al 
L'mca\rLayou-t -fov- 

the title ay\d date- 


android : layout 一 weight: M 1 M > 




<TextView 



android:id= M @+id/imageTitle" 

android : layout width:" fill_^parent" 

android:layout height= M wrap_content" 

android:textSize= M 20dp M 

android:textColor= M @color/image_title_color M 
android:layout_marginTop= M 5dp M /> 

Add 狄 1 c/ 

<TextView 

ad date ' 

android:id= n @+id/imageDate" 


、 

android : layout 一 width= n fill_parent n 

android : layout height="wrap content" 

android : textsize="10dp" 



android : layout marginBottom="5dp" /> 


</LinearLayout> 
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<LinearLayout 

android:orientation="horizontal" 
android : layout_width="wrap_content" 
android:layout_height= M wrap_content M 
android : gravity= M center_vertical n 
android : layout_weight= M 0 M 
android:layout 一 marginTop=”5dp n > 



ttcv-c is a ho\rizjO^*tal 
L'mcav-Layout 

but*bo^s oy \ -the 


<Button android : text:string/refresh’’ 

android : onClick="onRefreshButtonClicked" 


Add the bu-t-tohs 

"the layout. 


android : layout_width=’’wrap_content’’ 
android : layout_height=’’wrap_content’’ 
android:id="@+id/refreshButton" /> 


<Button android:text= M @string/setwallpaper" 
android:onClick= M onSetWallpaper M 
android : layout_width= M wrap_content M 
android:layout 一 height= n wrap_content n 
android : id= M @+id/setWallpaperButton M > 


<ScrollView android : layout—width= ，， fill—parent ，， 

android:layout_height= M wrap_content n android:layout_weight="1" > 
<LinearLayout android : orientation="vertical" 
android:layout_width= M fill_parent" 
android:layout_height= M wrap_content n 
android: gravity= n center—horizontal ，， > 

<ImageView android : id="@+id/imageDisplay" 
android:layout_width= n wrap_content 〃 
android:layout_height="wrap_content n 
android:layout_marginBottom= M 5dp" 
android:adj ustViewBounds="true" / > 

<TextView android : id= M @ + id/imageDescription" 
android: layout—width= n wrap_content ，， 
android:layout—height= n wrap_content n / > 

</LinearLayout> 

</ScrollView> 



</LinearLayout> 


^ Ei^d o( "the Chtivc 

header layout. 
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testing the landscape layout 



Tost DriVq 


Update the layout in your project to match the code updates you 
did with the magnets. Now run the app again. The emulator 
will start off in portrait mode. Press CTRL FI2 to switch to 
Landscape mode and back. 


CTRL —> F12 to 
switch to landscape 


NASA Dally Image 

GRAIL Heads to the Moon 

Sot, 10 Sep 2011 



CTRL ^ FI 2 to switch 
back to portrait 
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multiple device support 



Yeah, thafs a huge improvement! 
Ifs little details that will make your 
app so cool on the market. Plus, you 
know, space! 


This was a cool improvement 
for landscape mode. 

That button bar looks great in portrait 
mode but sure was a huge waste of space 
in landscape mode. With those buttons 
moved to the top right, you can see almost 
all of the image, even with the minimal 
screen height. And with this change, 
portrait mode is left alone and just the 
landscape mode was altered. Super cool! 


tJieretare no o 

Dumb Questions 


I would have laid out this screen differently. Is this the 
only way to solve this button issue? 

There are many different ways to have solved this design 
issue. This is pretty common when you’re dealing with user 
interface design. 

What is another way you might have solved this? 

You’ll learn about Android menus in a few chapters. These 
are actions that are hidden until you press the menu button. Menus 
are often a good choice if you want to hide functionality but still 
allow it to be used. 


This landscape mode change is pretty minimal. Can I 
make bigger changes? 

You can change the screen all around and have entirely 
different functionality! That said, you probably want to keep 
landscape mode and portrait mode pretty similar since they are the 
same screen from your users perspective and they might go back 
and forth as they move their phone around. Also, remember that 
the underlying Activity is the same for both landscape and portrait 
mode, so any features added to either orientation need to be 
supported by the same Activity. 
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replicating small screens 


What about super small screcw devices? 

Now that the landscape mode is taken care of it’s time to move on 
to small screen devices. But as with any other issue, the first step 
is always to replicate it in your local development environment. 

Testing landscape mode was easy! All you had to do was switch the 
orientation of the running emulator. But how do I make the emulator 
device smaller? 


Create an AYP for a smaller screen device 

The whole point of creating an AVD (which as a quick refresher 
stands for Android Virtual Device) is to be able to run an Android 
emulator mimicking a hardware device. Switching between landscape 
and portrait mode worked on the same device, but making a smaller 
screen requires a new device. 

Making a new AVD is easy to do though. Go to Window Android 
SDK and AVD Manager. Select Virtual Devices and press “New...”. 


1>00-Vy0 (API vcvs*ior> 

si«). 


Select API Level 10 . 





Se 七 VCSolu*t*ioir> *to 

iOO % 1^0 fi%cls. 


Create new Android Virtual Device (AVD) 


API10-300-350 


Android 2.3.3 - API Level 10 


CPU/ABI: ARM _:armeabi:_ 



Hard ware: 


Property 

Value 

Abstracted LCD density 

240 

Max VM application heap si 24 

Device ram size 

256 


Override the existing AVD with the same name 


N’ew ■.“ 


Delete 


Cancel Create AVD 


Pvcss Cvca*tc hW 
OY\Ct dovvfi^uved- 
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Launch your wgw AVP 


The AVD is just a description of a device. Before you 
can test your app on that AVD, you need to start it. 


youv Y\t^i 
you II see i*t appeav- *m *tV>c 
\/*iv-tual Pcvidcs list Select 七 he 
hCW A\/P^ 七 k list 


Virtual devices 
Instiled packages 
Available pad<£ 


AndroidSD^ and AVD Manager 
List of existing Android VirtLiaJ Devices located at / Users /jon atliansim q n / .android / avd 


AVD 

TaroV^ame 

Plalforrm 

API Level 

CPU/ABI 

‘VAPI10-300-350 

Android 2.3.3 

2,33 

10 

ARM (armeabi) 

■v" standard 

Android 2.^.3 

233 

10 

A!RM (armeabi) 


The ^ hVV is 

y\o^j 
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digging deeper into screen variations 


Ruh the app on the small device 


Now that the new AVD is running you can run the app on it 
just like you would your original AVD. Run your project now 
and you’ll see it running on the smaller emulator. 


Wcv-c is the 

WAS A Daily _ 
Uagc app 

V-Uhhih0 oh the 
small device 
cmual-fcoy/ 




^ 5554:API10-B00-350 


_3G ml B 4：22 

NASA Daily Image 

GRAIL Heads to the 
Moon 

Sat, 10 Sep 2011 




You may have to 
select the emulator 
after trying to tun 
your app. 


Your Android development environment 
knows about the emulators you have 
running. And if you have more than one 
emulator running, it will ask you which 
emulator you want to install and run 
your app on. If you closed your original 
emulator before launching the new 
smaller device, you won’t see this. 


Set 



Woah! That*s not what 
the app looked like at all 
on the smaller phone 


It looks really different! 

There are always going to be little differences between devices 
and emulators. But there shouldn’t be this drastic of a difference 
in display between them! Let’s get to the bottom of this... 


_3G ， 2:22 

NASA Daily Image 

GRAIL Heads to the Moon 

Sat 10 Sep 2011 


This app 
looks -totally 

"though i"t’s 
"the same siz^d 



Refresh 

Set Wallpaper 


■ 


The answer lies with pixel density. 
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tAoYt pixels 

oVCV" here … 


Screen Size 

This refers to the number of horizontal 
and vertical pixels on a screen. 


480 pixels wide 


300 pixels wide 


4 


As 


The MV 

you jus 七 

dv-catcd 


As 



800 

pixels 

high 


Pixel Density 

This refers to the abstracted number 
of pixels in an inch. 

1 inch 



Supcv- zoomed m view of 
1^1 mdh slaves or\ 

— *tv/o streets. Pi 乂 el doutrrts 

a\rc MOT *to s^dle- 


Per inch, the small screen phone actually has 
twice as many pixels as the big screen. 


Screens Up Cl^se 


There are two screen device properties that effect the way your 
application looks and runs on a device. 





inch 


o 


o 

5 

3 


s 

elh 

X 9 
-I ■■ 

p h 


o 


小 


Moui 
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tuning the small screen virtual device 


Edit the ^Ws pixel density 

You can edit your the Pixel Density of the emulator you just 
configured. Go the Window Android SDK and AVD 
Manager and select your new AVD. Click edit and you’ll 
see the same dialog that created your AVD. 

Under Hardware, there is a property called Abstracted 
LCD density. This controls the pixel density of your AVD. 


ttcv-cs i\\t 
dc^s'i-ty Kav-dwav-c 


Edit Android Virtual Device (AVD) 


Name: 

Target: 

CPU/AB1: 
5D Card: 


Snupshot: 


5 kin: 


API10-300-350 


Android 233 - API Level 10 


ARM -iarmeabi J 


® Size: 512 
O File: 


MiG 


Browse … 



Built-in: 

0 Resolution: 


Default fWVGASOO) 





- ’ 

300 


350 



Hardware: 



Clidk oh the value 
■to edit Set the 

io \^> 0 . 



Be sure to use a supported pixel density. 

The Abstract LCD Density can only be set to 120, 160, 
240, 213, or 320. If you edit your pixel density, you must 
set it to one of these values. 
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(Rc)start the AVP and the app 

Now that you’ve edited the AVD, close and 
restart it to make the changes take effect. 

Once you start the updated AVD, run the 
app again and see how it looks. 


55S4:API10-S00-350 


% rill f 4:32 

NASA Daily Image 

GRAIL Heads to the Moon 


Sat 10 Sep 2011 




Vow tke app looks 
rigkt on tke small 
screen emulator! 







What updates would you make to the layout design 
for small screens? 
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creating a special small screen layout 


Update the design for small screens 

Now that you can see what the small screen 
layout looks like, you can also see that you 
can’t make the same change you did for the 
landscape layout. Even though they both 
want to get rid of the buttons, the small 
screen doesn’t have room for the buttons 
next to the title and date. 


0 
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What about just making 
the buttons scroll with the 
picture and the description 
just for small screens? 



Scrolling the buttons is a great idea! 

You could relatively make a minor change to the 
layout, just for small screens, allowing the buttons 
to scroll on the screen after scrolling past the image 
and the description. This is a bit of the best-of-both- 
worlds as your regular screen sizes will still have the 
buttons on screen, and just the small screens will 
have to scroll. But at least they’ll see more of the 
image like the landscape layout. 


Time to make a new lay out … 



multiple device support 


Create a small scrccw only layout 

Just like you created a landscape specific layout, you can 
create a small screen specific layout. Open the new Android 
XML File Wizard and create a new layout XML file as you 
did before. But this time, add the size by selecting size from 
the Available Qualifiers. Once added, select screen size 
“Small” from the dropdown on the right. 


Sclcd*t SliC 
-fvom 七 he 
Available 
<5ual'i-ficv-s. 


« n o 

New Android XML File 


New Android XML File 

Creates a new Android XML file. 


❹ 


Project CHO 5_NASA_lmage_of_the_Day 
File activity_main.xml 
What type of resource would you like to create? 

® Layout O Values 

O Color List O Animator 

CJ : Preference CJ : Searchable 

What type of resource configuration would you like? 
Available Qualifiers 
设 Country Code 
IlD Network Code 
三气 Language 


Screen Width 
Screen Height 

□X 

[-P Orientation 


Or\tt added, sclcd*t 
small -fv-om *tV>C 
dv-of doy/ir> *to 

d small 

strttY\ sizjC- 


When you click 
Finish, a new layout 
xml file will be 
created in the layout- 
small directory for 
small screen phones. 
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building a special small screen layout 



Small Screen Layout Magnets 

Below are the magnets you need to complete the custom small 
screen layout. Just like the landscape mode, the small screen layout 
with the buttons in the ScrollView is going to be really similar to 
the original layout. You just need to recreate the button bar inside the 
ScrollView. Use the magnets below to complete the layout. 



YouV 


<Button android: text=’’@string/setwallpaper’’ 
android : onClick=”onSetWallpaper 〃 
android: layout_width=’’wrap_content’’ 
android:layout_height="wrap_content" 
android:id=’’@+id/setWallpaperButton’’ /> 


<TextView 

android : id="@+id/imageTitle" 
android : layout 一 width="fill_^p ar ent" 
android:layout—height="wrap—content" 
android:textSize="20dp" 
android: textColor =,, @color/image title 
android : layout 一 marginTop="5dp" 
android : layout 一 marginBottom="5dp" /> 


</LinearLayout, 


> 


color 〃 


CTextView 

android:id="@+id/imageDate" 
android : layout—width="f iii_p arent ,, 
android •• layout—h e ight=" wrap — content " 
android : textSize="10dp" 

^android:layout_marginBottom="5dp" /> 


〈ImageView 

android:id="@+id/imageDisplay" 
android:layout_width="fill_j5arent" 
android : layout 一 height="wrap content" 
android : layout_marginBottom="5dp" 
android: ad jus tViewBounds= ,/ true ^/> 


<ScrollView 

android: layout_width=”fill 』 arent" 
android : layout_height=^wrap_content > 
android:layout weight= 〃 l 〃 > 


<LinearLayout 

android : orientation= M vertical M 
android : layout_width= M fill_parent M 
android : layout_height= M wrap_content M 
android:gravity:’’center horizontal" > 
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tAart 




<?xml version= M l.0 M encoding="utf-8 M ?> 

CLinearLayout xmlns : android:'▼ http: / /schemas . android, com/apk/res/android' 
android : orientation= M vertical" 
android : layout_width= M fill—parent n 
android:layout_height= n fill 一 parent" > 


〈TextView 

android:id="@+id/imageDescription" 
android:layout 一 width="fill_parent" 
android:layout 一 height=’’wrap content' 



/> 


<Button android : text:’’@string/refresh’’ 

android:onClick= 〃 onRefreshButtonClicked’ 
android : layout_width= 〃 wrap_content 〃 
android : layout 一 height=”wrap_content” 
android:id="@+id/refreshButton" /> 


<LinearLayout 

android:orientation= 〃 horizontal 〃 

android : layout_width=’’f ill_parent’’ 

android : layout_height=’’wrap_content' 

android:layout_weight= 〃 0 〃 

android : paddi ngT op = ,r 5 dp ,r 

android : gravi ty=’’ center—hori zontal ’’ 

android : background="#ff8D8D8D" > 
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building a special small screen layout 



Small Screen Layout Magnet Solution 


Below are the magnets you needed to complete the custom small screen 
layout. Below are the magnets you need to complete the custom small 
screen layout. Just like the landscape mode, the small screen layout with 
the buttons in the ScrollView is going to be really similar to the original 
layout. You just need to recreate the button bar inside the ScrollView. 
Use the magnets below to complete the layout. You should have used the 
magnets below to complete the layout. 


<?xml version="l.0" encoding= M utf-8"?> 

<LinearLayout xmlns : android: n http://schemas.android.com/apk/res/android' 
android : orientation="vertical" 
android : layout_width= M fill_^parent M 
android : layout_height= M fill_parent" > 

<ScrollView 


android: layout 一 width="fill_^p aren t" 
android : layout__height= // wrap_content / 
android: layout__weight= /, l /, > 


\/c\rtidal 
L*mcav-Layou*t 
as 七 he sm^lc 
Sdvoll\/'ic>M dhild- 


the ScrollView. 


CLinearLayout 

android: orientation= "vertical' 1 
android : layout_width= M fill^parent' 1 
android:layout_height= n wrap_content" 
android : gravity= M center horizontal" > 




Hcvc av-c 七 rtle 

av\A da*tc 

as th*ildvcr> *to 七 he 
Sdvoll\/iev/s vertical 
Lmcav-Layout 


A 



<TextView 

android: id=’’@+id/imageTi tie’’ 
android : layout_width=’’f ill^parent’’ 
android : layout_height=’’wrap_content" 
android : textSize= 〃 20dp” 

android : textColor=’’@color/image—title 一 color’’ 
android : layout_marginTop="5dp" 
android:layout 一 marginBottom="5dp" /> 
<TextView 

android: id=’’@+id/imageDate’’ 
android : layout_width=’’f ill^parent’’ 
android : layout_height=’’wrap_content" 
android : textSize=”10dp” 
android:layout 一 marginBottom="5dp" /> 



The V-oot 

vcv-ti^al 

L'mcav-Layou*t 
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Hcv-c avc 七 he imay 

dr>d dcsd\r*ip*t*ioy> 

also as 

dh*ildv-Cir> bo ihc 
Sdvolll/iow^s vcvtidal 
L*mcav-Layou*t- 


This is 七 he s*ta\rt 
o( 七 he button 
f>dv>el divcdily mime 
as a cM\\d o( -the 

Stvoll\/*iC>MS vcv-tidal 

L*mcav-Layou*tdh'ild 


jhsidc "tKc bu"t"{joh 
t-ihC3\rLayout is 

the both 
the \rc-p\rcsh 3hd 
set wallpafev- 
but-toh a\rc added 
"to the lioHzjOht^l 
Lihcair Layout. 


<ImageView 

android: id=’’@+id/imageDi splay’’ 
android: layout 一 width= ,, fill_J5arent ,, 
android : layout 一 height:’’wrap content" 
android: layout_marginBottom= ,, 5dp ,/ 
android: adjustViewBounds=’’true’’/> 
〈TextView 

android: id=’’@+id/imageDescription" 
android : layout 一 width="fill_j5arent" 
android:layout height="wrap content" 


/> 



•heigh t="wrap 

<LinearLayout 

android : orientation= 〃 horizontal” 
android: layout_width=”fill_^parent” 
android : layout_height=^wrap_content / 
android:layout_weight =〃 0 〃 
android : paddingTop="5dp" 
android: gravity=’’center_horizontal’’ 
android : background=’’#ff8D8D8D" > 

<Button android:text="@string/refresh" 

android:onClick=”onRefreshButtonClicked' 
android : layout—width="wrap_content" 
android : layout—height="wrap content" 
android:id="@+id/refreshButton" /> 

<Button android : text=’’@string/setwallpaper’’ 
android : onClick=’’onSetWallpaper’’ 
android: layout_width=’’wrap_content’’ 
android : layout_height=’’wrap_content" 
android:id="@+id/setWallpaperButton" /> 
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testing out the small screen layout 




TesT DriVq 


Now that you have the layout customized for small screens, run the 
app and make sure your layout changes worked. 



S554:APIlO-SOO-3SO 


* lg| * 8:15 

NASA Daily Image 

astronomers to study it in detail as it evolves. 
hJoWj the supernova debris, which has faded 
over the years. Is brightening. This means that 
a different power source has begun to light 
the debris. The debris of SN 1987A Is 
beginning to Impact the syrroundlng ring, 
creating powerful shock waves that generate X- 
rays observed with NASA's Chandra X-ray 
Observatory. Those X-rays are Illuminating the 
su pern ova debris and shock heating fis making 
it glow in visible light. Since its launch In 1990, 
the Hubble telescope has provided a 
continuous record of the changes in SN 1987A. 
Image Credit: NASA d ESAj and P. ChallEs 
(Harvard-SmKthsonian Center for Astrophysics) 


5SS4:APIiO-SOO~3SO 


\N\\tr\ *tV>c app siars uf, 
buttons avc hidden 

bu*t yOU tdiY\ 灼 ov/ see 

-the imay! 


Ko bu*t*fcov>s OY\ 

stay 七 uf. 



I/Vhch you sdv-oll ALL 
the v/ay do^iv\, you’ll see 

the -full butfco 灼 bav. 



Refresh 1 Set Wallpaper 
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multiple device support 


What about small scrccw landscape mode? 

You’ve put a lot of effort now into customizing the 
app for landscape mode, and small screens. All of this 
because you really want to make the app the best on all 
of these different devices! But so far, the issues you knew 
about were raised by your users. But it’s your job as the 
Android expert to think ahead for your users and 
anticipate these layout changes. 

With that in mind, take a closer look at the small screen 
device again. You customized the main layout, the 
landscape layout and the small screen layout. 

Put what about small screen landscape mode? 

Turn the emulator into landscape mode (by pressing 
CTRL-F12) and see how it looks. 



SSS4API10-5Q0-3S0 



[he supernova debris, which has faded over the yearSj 
is brightening. This means that a different power 
source has begun to light the debris. The debris of SN 
1987A is beginning to impart the surrounding irfing, 
creating powerful shock waves that generate X-rays 
observed with NASA's Chandra X-ray Observatory. 
Those X-rays are illuminating the supernova debris 
and shock heating is making it glow in visible light. 
Since Its launch in 1990, the Hubble telescope has 
provided a continuous record of the changes in SN 
1987A. Image Credit: NASA, ESA, and P. ChalSIs 
(Harvard-Smithsonian Center for AstrophysScs) 


Set Wallpaper 



Wait, kow diet it iigure out tke 
landscape small screen layout? 
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determining the best layout 


How Android determines the best layout 

As you’re building and customizing your app for 
multiple screen sizes and configurations, you can end 
up with a lot of different layouts in your project. It’s 
important to understand which is getting loaded and 
why. Here’s a look at how the four layouts scenarios 
have loaded their layouts. 



A normal device is in portrait mode. 




fo\rt\raii mode 


T\\t layout ur\dcv- 
layou-t will yt 
loaded- 



Is the device in 
portrait mode? 


Yes 



Is there a custom layout 丁 
for this screen size? J^|0 



main.xml 



A normal device is in landscape mode. 


liQ) 


一 mode 


/ 


R.layout. 


— ► 


main 



T\\c layout ^v\dtr 

layou*b-lay\di will 
yt loddicd- 


Is the device in 
portrait mode? 


No 


Is there a custom layout 
for this screen size? 

Is there a custom layout 
for this landscape? 


No 

Yes! 



main.xml 
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A small device is in landscape mode 

^ 一 Small device \v\ 

mode 


/ 


R. layout. 


— ► 


main 



TV 

layoiA 

yt loaded 



Is the device in 
portrait mode? 


No 


Is there a custom layout 
for this screen size? 

Is there a custom layout 
for this landscape? 


Yes 

No 


main.xml 



Gee} Bits - 

Check the online docs at http://developer.android.com/ 
guide/practices/screens_support.html for more detailed 
information on how layouts are selected for other screen 
sizes not covered here. 
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changing the home icon 


Shaww's happy with the app wow 

Shawn can see the entire space picture 
without scrolling (which he’s thrilled 
about). And if he wants to see the 
description, refresh the app or set my 
wallpaper, he can always scroll down. You 
just made a happy user! 



Awesome! The app looks 
way better on my small 
phone. You even thought 
about landscape mode! 
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Now, about that icon 


Remember, Shawn did point out one other item that should 
be fixed before posting the app on the Android Market. He 
mentioned the app icon was the default icon and it would be 
a good idea to change it. It will definitely make the app more 
polished looking to your users, so let’s do that now. 

After some looking around on the web, you found some free 
pictures of earth. One in particular looked great for the home 
screen icon. 

As you saw in Chapter 3, app images are stored in the res 
directory. And the home screen icon is in there in a PNG 
called icon. png. 



You -fou^d 七 his OY\ 

y/cb diY\d >w3r>*t *to 
use *i*t as 七 he aff 



res 





bl 

drawable- 

Idpi 




PNG 



The ur>dcv* 

*tV>csc div-cdt>v-ics av-c used as 
七 home stvtty\ 1 乙。灼 . 


icon.png 


Ummm, no. How can 
three separate images 
control one app icon? 
Thafs crazy! 

There are multiple images just like there 
are multiple layouts. 

You have to build different layouts to optimize for different 
screens. And you have to include different images too. Let’s 
see what the different images are optimized for... 
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different image for each pixel density 


Piffcrcwt images for different pixel densities 

Earlier in this chapter, the first small screen AVD 
you created looked weird because the pixel density 
was wrong. Buttons and images were too big and 
everything looked really squished on the screen. The 
same weird appearance problems would happen if you 
use an image that’s too big or too small for a device’s 
pixel density. 

Android solves this problem by breaking devices down 
into groups of pixel densities (high, medium, and large) 
and allows you to include images for each group. Then 
just like the layouts getting chosen at runtime, image 
resources are dynamically loaded based on the screen 
size the app is running on. 


Android devices are broken ...which map to the separate folders 

down into these groups... under the res directory with images 
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multiple device support 



This way, once the images are 
displayed on the device, they are 
all about the same size. 


Real size is the whole reason for the 
pixel density groupings. 

If you have a screen with a pixel density of 240 DPI 
and an icon that is 240 pixels wide, it’s going to be 

one inch wide rendered on the screen. And if you 
have a 120 DPI screen with a 120 pixel wide image, 
it’s also going to be one inch wide rendered on the 
screen. 

Let’s say for example that you only had the large 240 
pixel width icon. If you displayed that on the 120 
DPI screen, it would render 2 inches wide! Twice 
as big as the large screen. 

That’s why the first AVD that you created had suck big 
buttons and icons, when the pixel density was wrong. 


Larger icon for high t\ 
resolution phones 


Medium sized 
icon for medium 
resolution phones 


Small icon for low 
resolution phones 



These dll 


respective -fco be 


d\rou^d -the sdmr\e siz^. 
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following the guidelines 


Image standards 

As you’re quickly learning, with all of the different 
devices, there are lots of variations in screen sized 
and pixel densities. Android divides these up into 
manageable groups to make things easier. But that’s 
not enough to make a consistent look and feel. 


To solve this problem, Android has a published set 
of guidelines that encourage standards. One of these 
standards is the image size of the home screen icon. 



Visit http : / /developer . 
android.com/guide/ 
practices/ui—guidelines/ 
index . html and familiarize yourself 
with the Android UI design guidelines. 


The guidelines define pixel dimensions for launcher icons at each pixel density. 



36x36 pixels 



48x48 pixels 



72x72 pixels 


th&re^cure no o 

Dumb Questions 


Are there any other design requirements for the icons? 

The icon design guidelines list a number of other design 
attributes to use for your home icons. These include recommended 
margins, colors, drop shadows, and more. 

Wow, that sounds like a lot of different requirements. 
Are there some examples? 

Absolutely. The icon design guidelines page includes a 
number of different example icons you can use for reference. 


The design requirements for these icons look really 
complicated! Is it worth it to seek a professional designer’s 
help? 

Yes. Apps are becoming much more graphics intensive 
and can often benefit form the help of a professional designer. 
This is especially true of your launcher icon which will be one 
of the first things your users see! If you work with a designer, 
point them over to the UI guidelines page as well as http ： // 
developer.android.com/guide/practices/ 
ui—guidelines/icon—design•html#design- 
tips for more information on working with graphics in Android. 
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〆 J 


Home Icon Magnets 

Below are the density specific folders under the res directory. There 
are magnets for the picture of earth icon resized for each pixel 
density. Drag the home icons on the squares to the right of the 
folder they belong to. 



apfv-opvia*tc 
idoir\ *to 

density spcti-f ie. 

di\rcd.*tov-y. 


This \Coy\ is 
72>W7Z pixels. 



This i 匕 。灼 is 
pixels. 



This idem is 


午知午 0 pixels. 
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testing the home icons 




Home Icon Magnet Solution 

Below are the density specific folders under the res directory. There 
are magnets for the picture of earth icon resized for each pixel 
density. You should have dragged the home icons on the squares to 
the right of the folder they belong to. 


res 



drawable- 
hdpi 








This 7ZW7Z pixel \toY\ is 
-fo\r W\ofr\ \rcsolu*tio^ 
devils By\d ^ocs \y\ the 
hdpi div-cd*tov-y. 


This 午知午 《 

i6o 灼 is -fov the medium 
resolution dcvidcs 
Joes \y\ the mdpi 
div-c^*tov-y. 


This pixel idoh is 

■ the low \rcsolutioh 
devils 5hd goes ih -the 
Idpi div-cd-fcov-y. 
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multiple device support 



Tost DriVq 


Now that you have optimized icons for each pixel density, run the app in both AVDs and navigate to the home 
screen. Note the updated icons. 


ai rill B 2:34 


Clock Contacts Custom Dev Tools 

Locale 



Phone Search Settings Spare Parts 


P 

Speech 

Recorder 





〆 ^ 0 y\ 七 he la\rjc sd\TCCK> high 
fi^cl dcr>siiy device, ihc 
idoK> is used- Bu-t 
still, rt just looks novmal. 



Image 


Search Settings Spare Parts Speech 

Recorder 

A 


0v\ the small sd\rccr> 
rwtdiurw pnccl dc^siiy 

device, ihc 午午 0 
\Coy\ is used- But 
i*t jus 七 looks 
^ovrwal. 


Two screen sizes, two pixel densities and different image to 
make the images look appropriate on each. Perfection! 
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getting more feedback 




It looks like the app is ready 
for the market 



After building the app, tweaking the 
layouts for screen sizes and orientations, 
and polishing it off with the home icons, 
it’s ready for people to download and run 
in from the Market.. 


T_ 

some 

market deploy or • 婦 / 

dc^loY'^5 market * 
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GaOg Piste 


You’ve done some great work optimizing your layouts for different devices. Here are 
some additional directions to explore if you’re looking for more! 


Covcv move •吧 aWs 


a ;d/ 么細1 “ 一， 

ZJtd ^OV\CS. 


strttr\ 


/Wake rhOVC M/Vs 

/ou C^i\y have Ohc AVD 4 ^ Uac 

s^eehs ahd cc ^ sr ， all. Tv^y 

a +cw so you dah icsi you^ sr，all 

la y 。 士 multiple 

d • 士士⑽七 siz^d Al/Ds. Wai^ yo^ 

pyout dy^i^lly vesiz^ 

based oh sdvcch siz^/ 


Rcav-v-a^c *t^c street -fov 
ov-ic^*tat»ov> 

\/ou made a small bcWc^ ovic^ta-bio^s, 

m ovm 3 ihe bu*t^s bo a bettev lodatio^ But 

■tWmk of some CT^rcmc you 6ould make 

i\,ai y/ouia oric 山七 icm di^W^CS. 

TWmk abou-t add’ -feaWes ov dvastid layout 
di-f-fev-c^dcs brbwe ⑶ ovic^*ba*tio^s. T\\\rk about 
Kov/ *bW»s v/ill t^tti -t^c user t^cr\t^ Is »*b 
be^e^i^idl oy a d\shrat {: \ oy^ Also, *tWk about \\o^ 
払 c Adtwity m(^i ^td to dKa^c ^ you V>avc 
W-tio^ali-ty m O^c ovic^-ta-tio^ bu-t ysoi 扣 otw. 
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picking the important stuff 


Your Screen Toolbox 

Now that you’ve optimized your 
app for different screen sizes ， 
orientations and densities, you 
can make all your apps look great 
across multiple Android devices! 



@ small sdrcc^s a^c at least 今 2 场 说 0 却 
@ normal sdrcc^s arc at least MOd^OdY 
,la^e 辦⑽糾 at least 外 0 却身奶却 
—_s ave 拙以 


** is At^sbf 卜 eU 




Pi^cl Dchsi-ty 

參 Idpi is a\rouhd /ZOdpi 

參州 dpi is a\rouhd / 厶 Odpi 
參 hdpi is a\rouhd 2 • 午 Odpi 

^ Adpi is a^ro\AYMi 3>ZOd\>i 



料 dpi is dois ihdh ** 


Create multiple AVDs for different screen 
sizes. 

Change emulator orientation by pressing 
CTRLF12. 

Create landscape layouts using the New 
Android XML file wizard and adding the 
landscape qualifier. 

Create small, normal, and large screen 
layouts using the New Android XML file 
wizard and adding the landscape qualifier. 

You can combine qualifiers and make 
layouts just for one size and orientation, like 
small and landscape. 

Adjust the pixel density as you create new 
AVDs to test the correct resource loading. 

Create custom resources for each pixel 
density you support. 

You can edit AVDs after you create them to 
adjust screen size and pixel density. But it’s 
still a good idea to have a few AVDs created 
with configurations for testing. 

Replace icon.png with a custom icon for 
your app, noting the specific icon sizes for 
each pixel density. 


9 
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tablets 


Running your apps on • 

肴 big(ger) screens 


w 





O 


That guy is off on his own. 
What he doesn’t get is that 
the whole band working 
together is way cooler than 
him by himself! 






There are more than just phones in the world of Android 

devices. In the last chapter, you learned how to customize layouts to target different 
phone screen sizes and device orientations. But now you want to take advantage of some 
of the other Android devices out there like tablets. Some of the same strategies still apply, 
like creating base layouts and optimizing for screen sizes and orientations, but you’ll learn 
about new features to support tablets. You’ll also learn about a cool new feature called 
fragments that allow you to configure, and reconfigure the content on the screen based 
on screen size. Let’s get going!. 


this is a new chapter 







thinking about tablets 


Pobby wants to ruw the NASA app on a tablet 

Bobby’s school is running an experiment and 
gave everyone in his class an Android tablet. 

Naturally, the first thing Bobby wanted to do 
was check and see how his NASA Image of 
the Day app looks on his brand new tablet! 


Ive been having a TON of fun with the 
NASA Image of the Day app. And now 
that Ive got this new tablet, I can wait to 
see the NASA app running on it! 


Install the app on a tablet. 

The app is already up on the market, so 
you can download it from any device... 
including a tablet! You can also install the 
app directly on the tablet just like a phone. 


Let’s see how it looks... 
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working with feeds 


The app doesn't look so good 


The title is really small on this huge screen, the image is 
centered with too much blank space, and the text goes 
all the way across the screen. It looks bad because we 
are running a layout that was designed for a phone and 
running it straight on a tablet. 





The tiilc is 

ioo small. 


NASA Daily Image 

Expedition 28 Lands 

Ffi, 16 Sep 2011 


Thcv-c is a vcv-y lav-jc 
x>uirrt of bla^k spa^c- 






TV^ app loaded 
Udstapc laYou-b, s\uc 
七 Wis is m la^dstapc mode. 


Rpfrp<;h I Set V^allpaper 


The Soyuz TMA-21 spacecraft is seen as It lands with Expedition 28 Commander Andrey Borisenko, and Flight Engineers Ron Garan, and Alexander Samokutyaev In a remote area outside of the town of 
Zhezkazgan, Kazakhstan, on Friday, Sept. 16, 2011. NASA Astronaut Garan, Russian Cosmonauts Borisenko and Samokutyaev are returning from more than five months onboard the International Space 
Station where they served as members of the Expedition 27 and 28 crews. Photo Credit: (NASA/Bill Ingalls) 


T ： D9 


Anctroict tablet users ctescrite apps 
like tkis as teingf kumongiliect! 

亇 


Smtc l»kc ^ c 7 

avc \ruw*m 3 




Really wide 
st\rc-(ihcd text … 
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adding more content 


What about all that blank space? 

Right now，the app has a lot of blank space 
when it runs on a tablet. Bobby’s teacher, 

Kevin, has an idea for you. 


Why dorVt you fill up some of 
that free space by displaying 
NASA educational news? 


C 


Adding a second feed sounds like a 
great way to fill out the app! 

Since the school gave out tablets, all of Bobby’s 
classmates have them now. And they all want 
to run the NASA Daily Image app. While they 
are looking at the daily image, a NASA feed 
displaying information specifically oriented 
around education sounds like a perfect fit. So 
you’re not just adding stuff to fill out the screen, 
you’re going to be adding additional useful 
content for your tablet users. 



Bobby’s 


214 


Chapter 6 


working with feeds 


The NASA education news feed activity 

Kevin thinks this is such a good idea that he 
built the Activity for you to display the NASA 
Educational News feed. 

Download the sample code for Chapter 6. There 
is a project called CHO 6_NASA_Image_ 



of_the_Day that includes a new Activity for 
displaying the NASA Education News feed in 
NasaEdNews.java. 

You’ll be taking this code and the code you’ve 
written in earlier chapters to make these two 
Activities work together for a tablet app. 


Download the sample projects i fyou 
haven’t already. Open the project 
CH06—NASA 」 mage_of—the—Day 
and you’ll find a new Activity called 
NasaEdNews and all of the feed 
parsing code to make it work. 


Art disflay'mj tV^C 

KASA cduta-tio^ -feed- 


NASA Participates In Space Farm 7 
Mission At The Rock Ranch, Ga. 

Educators from NASA's Kennedy Space Center, Fla., 
will travel to The Rock Ranch, Ga., on Sept. 24 to 
participate in the ranch's annual family fun day kick¬ 
off event. 

h ttp://www. nasa.sov/cen ters/kennedv/ne ws/ 
releases/2011/release-20110916.html 


NASA Seeks Undergraduates To Fly 
Research In Microgravity 

NASA is offering undergraduate students the 
opportunity to test an experiment in microgravity as 
part of the agenc/s Reduced Gravity Education Flight 
Program. 

http://www.nasa.sov/home/hqnews/201 1/sep/ 

HO 11-297 Reduced Gravity Flishts.html 

NASA Offers Shuttle Tiles And Space 
Food To Schools And Universities 

NASA is offering space shuttle heat shield tiles and 
dehydrated astronaut food to eligible schools and 
universities. 

http://mm.nasa.sov/home/hcmews/201 1/sep/ 

HO 11-296 Shuttle Tiles Space Food.html 

NASA Family Education Night Set For 
in 



o 


You’ll learn all about 
lists in the next chapter 

The NASA Education News 
Activity is displaying each 
result in a special View called a ListView. 
You’ll learn all about them and how to build 
and customize your own in the next chapter. 
For this chapter, you can use the sample code 
you’ve downloaded. 
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designing for the big screen 


How do you wawt the app to look? 

There are a number of different ways to 
design the app to include both the daily image 
and educational news. Here is one design that 
uses space well, and also keeps the news off to 
the side as secondary information. 


The design o ( 七 he 
o( -the day sedio 灼 is 
cosily 




Picture 七 i 七 le 


Rc-fvcsK 

Set 1/Vallfapcv 




Pid"tuV"C desdvip 七 icm 


The dcs*i^r> o( 伙他 

lis 七 also vcmams vasiddlly 
山 jus*t a vcvtidal 
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working with feeds 


The plan 

There are a number of different ways to 
design the app to include both the daily image 
and educational news. Here is one design that 
uses space well, and also keeps the news off to 
the side as secondary information. 


1. Update your development environment 

Android tablets are running Android version 3.0 
and above. In order to be able to develop tablet 
specific Android functionality, you’ll need to update 
your development environment to use an Android 
platform 3.0 or above. 



|y>s*ball r\t^i 




t Combine the activities 

The code for the Nasa Image of the Day and the 
Education News feed are in two different Activities. 
These need to be combined into a single Activity to 
they can be displayed on the screen. 


Pisplay *t>wo ad*tiv*i*tics 
oy\ or\t sdvccrv 




3. Test the new combined activity 

You’re going to be moving a lot of code around to 
make both Activities display on the screen together. 
As always, you’ll need to test your code and make 
sure nothing is broken (and fix it if it is)! 


Tcs*t all youv Code 
youVc doy>C- 
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adding a new platform 


Add a new platform 


In Chapter 1, you installed all of the Android development tools, 
including the base SDK and one version of the Android platform 
(Android 2.3.3, API Version 10). Tablets use a later version of 
Android starting with Android version 3.2 (API version 13). 


Android is built to handle these differences by allowing you to install 
multiple platforms at once in your development environment. To 
work with Tablet specific functionality, start by installing Android 3.0. 
Launch the Android SDK and AVD Manager select Available 
Packages, and install Android 3.2. 


f[Y\dyo\d SP^ 
^ J\Vt> 


Select Amiable 

Patkays. 

£clcd*t h^Aro\A 

WSIO 灼 H 


non 


Android SDK and AVD Manager 


Virtual devices 

Installed packages 
,Available packages 

SDK Location: /Users/jonathansimon/android-sdk-mac_x86 / 

Packages available for download 

□ ▼:: 争 Android Repository 

► |^] Documentation for Android SDK, API 13, revision 1 

兒 ► »f* SDK Platform Android 3.2, API 13, revision 1 

.^ -- - 

► 'f* SDK Platform Android 3.1, API 12, revision 3 

► 'p* SDK Platform Android 2.3.3, API 10, revision 2 

口 ►■蓊 _ SDK Platform Android 2.2, API 8, revision 3 

□ ►■ 翁 _ SDK Platform Android 2.1, API 7, revision 3 

Q ► Samples for SDK API 13, revision 1 

Q ► Samples for SDK API 12, revision 1 

► Ui Android Compatibility package, revision 3 

□ ► 'iS*Third party Add-ons 


Description 


Android SDK Platform 3.2, revision 


( Add Add-on Site... ) >/ Display 〔 Refresh 〕 



Pv-css |r\s*tall 

Selected 


tWeiare no o 

Dumb Questi9ns 


How come Android versions have a version number and 
an API number? 

Since your app will be running on multiple Android versions 
simultaneously, the Android platforms are very specific about API 
changes. And the version number isn’t enough to let you know 
what version the API is. For example, 2.3 is API version 9, 2.3.3 
is API version 10, and 3.0 is API version 11. Since the numbering 
jumped from 2.3.3 to 3.0, the API version helps keep versions in 
sequence. 


How come there are separate versions for Android and 
Google platforms for each release? 

The base Android platform versions include the core Android 
platform. Google provides an extended version of each platform 
with additional APIs including maps and other cool add ons. 


218 Chapter 6 


















working with feeds 


Setup a tablet AVP 

Now that you have a new Android platform version 
installed, you need to setup an Android Virtual 
Device (AVD) that uses it. Then when you launch 
that AVD, you’ll be running an emulator with the 
latest version. And in this case, we’ll want to setup 
tablet dimensions since we’re testing tablets. 


NarwC the Al/D 

sorwcih'mj ihai will 
help you \rcrwcrwbc\r 

whidh ov\c i-t it- a 
domb'md'tioir) of vcv*sioh 
and sizjg will help you 
<\uidkly -tell youv Al/Ds 
apavt 


Create new Android Virtual Device (AVD) 



Snapshot: 


Skin: 


AP_13-Tabi.et 


Android 3.2 - API Level IS 


CPU/AiBI: 
SD Card: 


免 Enabled 



Sele 乙七七 he 
pla*t^o\rm 
us 七 ms-talcd- 


ou 


© Size: 

MiG ^ " 

K. J 


0 File: 

(_ Browse … J 


• Buill-m: Default [WXGA) 

O Resolution: 


x 


Select *tV^c 
dc-faul-b siz^, 


Hardware: 


Property 

Value 

Abstracted LCD ekn&ity 

]60 

Keyboard lid support 

no 

Max VM application heap si 48 

Device ram size 

2S6 


Ovenrfde the existing AVD with the same name 


New … 


Delete 


CamceB j ::、 Create AVD 




P\ress Create Al/D 
v/hc 灼 youVc doY\c- 
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running a tablet in the emulator 


Start the tablet AVP 


Once your new tablet AVD is setup, start the 
AVD by going to Android SDK and AVD 
Manager Virtual Devices and launching the 
new API 13-Tablet device. 

You’ll notice it looks a lot different from Android 
2.3.3. 


This is 



This y ou "to a || 
^ app s ihstallcd oh 

the device. 



These *tV>v*cc butto 灼 s are 七 he batk button, 七 

iiome styttY\ bu*t*toi^ dr>d m 伙 u button 

v-cspcd*t-fully. They have bccy> moved *to so^*t 
buttons -fov* *tclblc*ts- 


Now let’s run the app on the tablet AVD 
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Run the app on the tablet AVP 


Now that the tablet AVD is running, you can 
run your app on that AVD as you normally 
would (using the play button or right clicking on 

the app in Eclipse and selecting run). The app is ’m 

"the Crwula-fcov-. 



S554:API13-Tablet 


NASA Daily linage 


Expedition 28 Lands 


1 in a remote area outside of the 
months onboard the Inters 


The Soyu 2 TMA 21 spacecraft is seen as It lands with Expedition 20 Commander Andrcy Dorlscnko, ar>d flight engineers 
Zhezkarsan. Kazakhstan, on Friday, Sept 16. 2011. NASA Astronaut Garan. Russian Cosmonauts Borisenko and Sacr 


izka^gan. K 
lion where 


they served as members of the Expedition 27 and 28 aewi. Photo Credit: (NASA/BHI Ir 



Android will check where you want to run your app. 


If you have both Android 
emulators running and 
you run your app, you’ll 
be shown a dialog with 
the available devices. You 
can then choose where you 
want to run the app from 
the list of devices. 



I*P you have multiple Al/Ds oy 

devils youll get a dialog 

like this y/hch you youv- app. 


Android Device Chooser 
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Combine the activities 

Now that you have the app running in 
the tablet specific emulator, it’s time to 
start implementing the design changes to 
combine the activities on one screen. 

The todc (or this 



One combined activity 

One way to make this work would be to combine both 
the Image of the Day and the Education News Feed 
Activities into one single combined Activity. There 
are a few big downsides to this. 

First, you would be duplicating code since you want to 
be able to keep the Activities separate to run just one at 
a time on a small screen device. On top of that, right 
now the code for each function (the image and the news 
feed) is encapsulated in an Activity. And it would be 
great to keep them that way. 


You could make one comLinect 
Activity to ctisplay Lotk 
Activities on one screen... 


222 Chapter 6 






















working with feeds 



Wouldn t it be dreamy if you could 
combine multiple Activities in a single screen 
without having to combine them into one giant 
Activity. But I know it's just a fantasy... 
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meet fragment 


Use fragments 


It’s a natural progression to add more features per 
screen once you move to the larger screen sizes of 
tablets. But since Android devices take on so many 
different shapes and sizes, it’s important to remain 
flexible and be able to arbitrarily combine parts 
of different screens. 

But it’s equally important that the functionality 
for the screen part stay tightly coupled to the 
screen part that is rendered. 

To solve these needs, Android introduced the idea 

of screen fragments. 


Ow a tablet... 

Users will see both fragments on a single 
screen. And the logic to drive each screen 
art is in a separate fragment. 
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working with feeds 


... but the codebase is built oh activities 

Fragments sound like a great idea, but right now your 
codebase is built on Activities, not fragments. Without 
rewriting your app from from scracth, you need to convert 
those Activities to fragments. How are you going to do it? 


You have two Activities... 



... you want to fragments and a Screen. 


Image of 
the Day 


Education 

News 


\ 





*to 



Converting your existing app to use fragments 

Here are the steps you’ll take to convert your existing 
app to use fragments without rewriting it from scratch. 



Convert your existing Activities to fragments. 

This will allow you to combine them into a single screen. 


❺ 

o 

o 


Create a new Activity that will display the two fragments. 
Add the two fragments to the new Activity. 


Test and bug fix as needed. 
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migrating activities to fragments 


Extend fragment instead of activity 


Start by opening the NASA Image of 
the Day Activity (in Nasalotd. j ava). 
Change the class declaration from extending 
Activity to extending Fragment. 




adtivi-tv. 


instead ol' activity. 


Nasalot: ava S3 

package com.headfirstlabs.ch05.nasa 

㊉ import java.io.IOException;Q 











public class Nasalotd extends irnplements IotdHandlerListener { 

private final static String TAG - Nasalotd. class. getName(); 

private static final String URL - "http ://wv»vk. nasa.gov/rss/image_of_the_day.rss*' ; 

private Handler handler; 
private ProgressDialog dialog; 
private Bitmap image; 

public void onCreate(Bundle savedlnstanceState) { 

5kP.?JI - onCreate(savedlnstanceState); 

5fifcC.Qnk?J3iy.i5W(R - layout. activi ty_main); 
handler ■ new Handler(); 
refreshFromFeedC); 


private void refreshFromFeed() { 

dialog ■ ProgressDialog .jjhpjy^this, "Loading* 

Thread th - new Thread(new Runnable() { 
public void run() { 

IotdHandler iotdHandler - new IotdHandler(); 
iotdHandler.setListener(NasaIotd. this); 
try { 

iotdHandler.jjnP.M&J.fjSfiSlCNasalotd. this , new URL(i//?L)); 
} catch (Exception e) { 
e.printstackTrace(); 

/ 

th. startQ; 


LOTS cv-v-ovs. 
(Bach lihc ih 
the ma\r^ih is 
C\r\ro\r). 
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Extending fragment is the right thing to do. 

But there are a few other changes you’ll need to make in 
your development environment and the Fragment itself for 
everything to work seamlessly. 

Let’s start by updating your development 
environment... 













working with feeds 


Set the android version for your project 


If you hover over the line in the margin of the 
Eclipse editor, you’ll see an error saying that 
class Fragment is not found. Right now, you’re 
probably wondering how the Fragment class 
couldn’t be found if you’re running the app on a 
tablet running Android 3.2! 

The answer is that even though you’re running 
the app on an Android AVD running Android 
version3.2, your project is still set to build using 
version 2.3.3. And Fragment’s hadn’t been 
released in Android 2.3.3 so the class Fragment 
couldn’t be found. 



Update the Android version building 
this project by going to Project 
Properties (right click on the project) 
and select Android. Then select a build 
target of Android 3.2. 



fv-ofev-ty street 

•m P\rojcd*t Pvofcv-tics. 


Properties for CH06 NA5AJmage of the Day 



type filler text 

Re sou rce 
Android 
Builders 
► ■Google 
Java Euild Path 
►Java Code Style 
►Java Compiler 
►Java Editor 
Javadoc Location 
Project References 
Refactoring His-Eorv 
RLiti/Debug Settings 
Task Repository 
Task Tags 


Sclcdt 
A^dv-oid 1>2- 


Preject Build Target 


Target Name 

Vendor 

Platform 

API L 

[! Android L5 

Android Open Source Project 

L.5 

3 

r*\ 

[! Coogle APIs 

Coagle Inc, 

L5 

3 


□ Android 1.6 

Android Open Source Project 

L.6 

4 


!Hl Coagle APIs 

Coogle Inc, 

1.6 

4 


Q Android 2,1-updatel 

Android Open Source Project 

2.1-update 7 


[i Coagle APIs 

Google Inc, 

2.1-update 7 


Android 2.2 

Android Open Source Project 

2.2 

8 


□ Coogle APIs 

Google Inc: 

2.2 

8 


Q Android 23 

Android Open Source Project 

23 

9 


□ Coogle APIs 

Coogle Inc, 

23 

9 


[1 Android 2 . 3.3 

Android Open Source Project 

2 3.3 

10 


]Google APIs 

Google Inc- 

2 3.3 

10 


[! Android 3.0 

Android Open Source Project 

3,0 

11 


’二 Coagle APIs 

Google Inc, 

3,0 

11 


□ Android 3.1 

Android Open Source Project 

3.1 

12 


Coa-gle APIs 

Coogle Inc, 

3.1 

U 

u 

M Android 3.2 

Android Open Source Project 

3 2 

U 

A, 

]Coagle APIs 

Google Inc- 

3 2 

13 

▼ 

c _ 一 



Standard AndroSd platform 2.3.3 







Pv-css 0 ^ 
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updating calls to activity methods 


Why do you still get errors? 

After you select OK, setting the Android platform 
version for your project, Eclipse will automatically 
rebuild your project using the new platform. The 
Fragment class should be found now, but there are 
still many other errors to contend with. 

Fragments aren't activites 
themselves... 

The implementation of the Nasalotd 
relied on several methods inherited 
by subclassing Activity. But 
Fragment doesn’t extend Activity, 
and now Nasalotd extends 
Fragment not Activity, so those 
methods are out of scope. 


... but they do have access to 
their Activity. 

Fragments can’t be launched by 
themselves. Instead, your app will still 
be launched by an Activity, and 
that Activity is going to assemble the 
Fragments to display on the screen. 

But the Fragment can get a reference 
to the Activity that added it to a 
screen using the method getActivity. 


This code will throw a compiler error 

This line is from the iotdParsed method and is getting a reference to the Title TextView 
using the f indViewByld method. But that method doesn’t exist in Fragment. 


TextView titleView = (TextView) 

findViewByld (R. id. imageTitle); 

-- ： - 

dhd will dduse a Compile CV-v-ov. 


This code works 

Here is the same line of code modified to work in a Fragment. Notice that getActivity is called 
before findViewByld. This gives a reference to the Activity that launched the Fragment. 


TextView titleView = (TextView) 

getActivity () . findViewByld (R. id. imageTitle); 



Cal I mg a *to the "that 

displayed the ⑶七 . you da 的 dall -findViewByld 
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working with feeds 


^harpen your pencil 


Below is the iotdParsed method that is called when the parser 
completes parsing and the results are displayed on the screen. 
Modify the code below to use getActivity () to retrieve the 
Activity and make this Fragment work correctly. 


public void iotdParsed(final Bitmap image, final String title, 
final String description, final String date) { 

handler.post( 

new Runnable() { 

public void run() { 

TextView titleView = (TextView) 

findViewByld(R.id.imageTitle); 
titleView.setText(title); 

TextView dateView = (TextView) 

findViewByld(R.id.imageDate); 
dateView.setText(date); 


ImageView imageView = ( 工 mageView) 

findViewByld(R.id.imageDisplay); 
imageView.setlmageBitmap(image); 

TextView descriptionView = (TextView) 

findViewByld(R.id.imageDescription); 
descriptionView.setText(description); 
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updating lifecycle methods 

- f^irpen your pencil 


Below is the iotdParsed method that is called when the 
parser completes parsing and the results are displayed on 
the screen. You should have modified the code below to use 
getActivity () to retrieve the Activity and make this 
Fragment work correctly. 


public void iotdParsed(final Bitmap image, final String title, 
final String description, final String date) { 

handler.post( 

new Runnable() { 

public void run() { 

TextView titleView = (TextView) 

ytM 七 ivi 七 Y(). findViewByld(R.id.imageTitle); 
titleView.setText(title); 


All o( -fmdVicv/Byld 

ddlls *to be preceded 
by 



TextView dateView = (TextView) 

findViewByld(R.id.imageDate); 
dateView.setText(date); 

ImageView imageView = ( 工 mageView) 

f indViewByld (R. id. imageDisplay); 
imageView.setlmageBitmap(image); 

TextView descriptionView = (TextView) 

findViewByld(R.id.imageDescription) 
descriptionView.setText(description); 


this! > 


Go through the Activity and look 
for other errors that can be fixed by 
calling getActivity before the 
method call not being found. 
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working with feeds 


Update the lifecycle methods 

The lifecycle methods of a Fragment are also a bit different than 
Activity. One of the major differences are lifecycle methods that 
allow code to execute when lifecycle methods happen on the associated 
Activity. 

Another major change is in onCreate in your Activity, you configured 
the Activity and set the view. With Fragments, onCreate is 
separated into two methods, with an additional method added called 
onCreate View which returns a View. This allows the Activity to 
control the view generation and query the Fragment for their Views. 


These rweihods av-c based ov\ 
li-fcdylc events \y\ 七 he A 匕七 


You'll almost always override 
these three methods. 



Just like Activity, there are a 
number of lifecycle methods you 
can override from the Fragment 
base class. But you’ll almost always 
override these three. 




七 io 灼 



Cv-catc \rctu\rh 
l/icw "to use 



S*tav ■七 needed 

s*tav*b. 
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planning fragment lifecycle methods 


Verify the lifecycle methods 

The only lifecycle method overridden in Nasalotd 
is onCreate, which contains all of the initialization 
and configuration for the Activity. When 
migrating to Fragments, this code needs to split 
up since the lifecycle includes separate creation, 
attachment, and rendering methods to facilitate 
combining fragments. 

The handler creation and invoking the feed refresh 
can still happen in onCreate. 


TKc ha 朽 dlev vc-fv-csli 

CdiY\ s*tay m otiOrtdkt 


public void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
handler = new Handler(); 
refreshFromFeed(); 

setContentView(R.layout.activity_main); 



1 - 1 

i\\c CoY\itY\i v*ic>w r\tcds b> 
s\y\U y\ttd b> vc*tuv-y> v*ic>w 

•m or>Cv^caic\/*ic>w v-a*thcv* i\\Bv\ *thc 

But the view creation has to happen separately. doyrteh 七 v*ic>w -Pov 七 he cr>*tiv*c A 匕七 Wi 七 V. 

Fragment has a special lifecycle method that returns 
the View for the Fragment called onCreateView. 

But rather than returning an R constant for the View 
XML, you return an instantiated View. 


oY\CrtaitV\c^i v-c*tu\r^s 
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working with feeds 




Wait, how are you 
supposed to instantiate 
a View? I thought Android 
did that for you! 


You can instantiate Views yourself, too. 

The set Con tent View method is a helper method 
that takes an R file constant and creates a View. 

This works internally by looking up the XML layout 
defined by that constant, parsing the file, and creating 
and configuring each View specified in the layout. 


This creation of real views from layout 
XML is called inflation. 


T 

The layout )<ML 
-Pile Joes ih. 



娜 


The Layout I processes 

layout )(ML- 

i\)t V\t^s 七七 

avc described m 七 he )<A1L -file- 



Out m-fla-tcd, View CBv\ be 

v-c*tuv*r\cdi m oir\Cv"ca*tc\/»c>M 
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inflating views 


Using Layoutlwflater 


It sounds like a Layout Inf later will do the 
job, but where do you get the Layout Inf later? 
There are a few parameters passed in to the 
onCreateView method, and one of them is a 
Layout Inf later. And you can use it to inflate 
your View defined in the Fragment’s layout. 


public View onCreateView( Layoutlnflater inflater, 

ViewGroup container. Bundle savedlnstanceState) { 

You v/'ill nrvfla 七 e youv 
layou*t m V>cv*c 


A layoiA 七 m-Platcv- is passed m "to 


Inflating the layout 


The inflate method on Layout Inf later take 
the R constant of the layout you want to inflate as 
an input parameter. It also takes a root ViewGroup 
that helps the Layout Inf later configure the 
internal layout inflation. The method also takes a 
boolean parameter indicating whether or not to 
attach the layout to the ViewGroup being passed in. 


The 

广 method -fv*om 

丄 Layou 七 


public void inflate ( , , r u 

int layoutld, 气 — - layout you 命七 *b 

ViewGroup root, The Yooi {x> 

boolean attachToRoot doh-figuve layout ih-Pla-tioh. 


\whc*thcv- ov ir>o*t *to *tV>c 

v*ic>w *bo \/*ic>M^v-ouf. This is 
^o'm^ h> be -false -fov 
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working with feeds 



onCreateView Magnets 

Below are empty methods for onCreate, onCreateView, and 
onStart. Complete the methods with the magnets below paying 
close attention to which code belongs in each method. Not all of the 
magnets will be used, so you will have some left over. 


public void onCreate(Bundle bundle) 



Code m hcvc. 


public View onCreateView(Layoutlnflater inflater, 

ViewGroup container. Bundle savedlnstanceState) { 


and \rrtu\m -the 
View -foV 


public void onStart () { 


Call 七 he v-c-fvcsV> method 
m heve *to be suve 七 he 
v*ic>w >Mds dv*ca*tcd 
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implementing onCreateView 



onCreateView Magnets Solution 

Below are empty methods for onCreate, onCreateView, and 
onStart. You should have completed the methods with the 
magnets below paying close attention to which code belongs in 
each method. You should have extra magnets left over. 


public void onCreate(Bundle bundle) 



丁 he Kdhdlc\r dah still be 
ih OhfVcdtc. 


public View onCreateView(Layoutlnflater inflater, 

ViewGroup container. Bundle savedlnstanceState) { 

I relate 七 he layou-t 七 I 化 layou-t 

^ passed \y\, av\A i\\t 一 mam layout- 


retur 


*n 11 inflater.inflate( 

L 


R.layout.activity main 

| container, I 

false 

0 


public void onStart () { 

super.onStart() ; \ Rc^csh Ihc m sta^ 

- 1 _ this way, ohCv-catc\/icv/ will have 

already bcc^ called a^d ihe views 

} will have been dvcaicd. 



Thc\rc is y\o ^r\ttA *to ^dll 

sc*tCo^*tc^*t\/icv/ s\Y\tt 

o^C\rca*tc\/icv/ vc*tu\nr\s view- 
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working with feeds 


Convert NasaEdNews to a fragment 


You’re done converting the Nasalotd to a 
Fragment, but now you have to do the same 
updating to NasaEdNews. They both need 
to be Fragments so you can add them to the 
screen. 


this! > 

w 


Update your version of 
NasaEdNews to be a 
Fragment according to 
these changes. 


»^s*tcad o-f 


public class NasaEdNews extends Fragment implements EdNewsHandlerListener { 

private static final String URL = "http :/ /www.nasa.gov/rss/educationnews.rss 

private Handler handler; 

private EdNewsAdapter listAdapter; 

public void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
handler = new Handler(); 

n-rr T 1 : n (r 


seLUon 



public View onCreateView(Layoutlnflater inflater, 

ViewGroup container , Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.ed news , container , false) 


public void onStart () { 

super.onStart (); 


a v-c*fcv-dr>tc 

•fco 

tall 

-f'mdVicv/Byld 
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creating a new activity 


Make the surrounding activity 

Now you’ve converted both Activities to 
Fragments, but you can’t launch a Fragment on 
it’s own. You can combine the Fragments in an 
Activity and display the Activity... but you don’t 
have an Activity in your app. 

Now you’ll make a new Activity, and render 
the Image of the Day and Education News 
Fragments in that new Activity. 



KasaApf (Activity) 



disf>layedi m youv 
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working with feeds 



Create a new Activity java class 

In the Eclipse Package Explorer, navigate to the 
project source (CHO 6_NASA_Image_of_the_Day 


if you’re using the example code). Go to src/com/ 
headfirst labs/ chO 6/nasa/iotd. Right click 
on the iotd package and select New Glass. Gall the 
new class NasaApp . j ava. 



Cvca*tc a r>c>w 
dalled NasaApp java 
•the souvdc +oldcv-. 



nasa app. xml. 
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implement a basic activity 


Puilt out a basic Activity 

You just created a class and a layout for the 
Activity, but they are both empty. Start by building 
out NasaApp . j ava to extend Activity, and 
create an onCreate method to render the layout. 


public class NasaAppActivity extends Activity { 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.nasa_app); 




山 “ FoTrl 
fubli■ 

£j 


NasaApp.java 


How come I was supposed to get rid of 
the setContentView methods from the 
Nasalotd.java and NasaEdNews.java, but 
add it here? 



NasaApp is an Activity, not a Fragment. 

You just converted both Nasalotd . j ava and 
NasaEdNews . j ava to be Fragments instead 
of Activities, and Fragments should use 
onCreateView which returns a View instead of 
setting the Content View. But NasaApp . j ava is an 
Activity, and it should set the Content View. 
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working with feeds 


Update the manifest 

The AndroidManif est. xml contains metadata 
about how your app is configured, and how to run 
and install it. You first modified the manifest file in 
Chapter 3 to add permissions to access the network. 
The manifest file also includes a reference to the 
Activity to launch. And since you’re changing 
the Activity to launch (from Nasalotd to 
NasaApp) you need to update the manifest. 


〈application android:icon= 〃 @drawable/icon 〃 android:label= 〃 @string/app—name” > 

〈activity android : name: • NasaApp" ^ Update the a^d\roid^amc attribute m 

android: label=’’@string/app_name" > ihc -feo -NasaAff .hlsssloid 

<intent-f ilter> sih 以 is "the y\Cvj Activity. 

<action android:name= 〃 android.intent•action•MAIN” / > 

〈category android:name= 〃 android•intent•category•LAUNCHER" / > 

</intent-filter> 

</activity> 

</application 〉 

AndroidManifestxml 




this! 


Open the AndroidManif est. xml file in 
the project root. Click on the tab to the right 
labeled AndroidManifest. xml to edit 
the XML directly. Update the androidiname 
attribute in the Activity to point to the 
new Activity you just created. 


you are here ► 


241 












test the new activity 



Tost DriVq 


Run the app now to verify everything is starts and renders the 
Activity 

The app bui the is e 叶七 y. 

This is 的 七 su\rp\ris*mg s'mde you 
displaymj d layot 七 ha 七 has ⑽ Vic^s. 




The layout you jus 七 

r — tv-caicd *m NasaApp > 

docs 乙 o>vtam a^y 

\/icws yet 


<?xml version= 〃 l.0 〃 encoding= 〃 utf-8〃？> 

<LinearLayout 

xmlns : android=”http://schemas.android.com/apk/res/android” 
android:orientation= 〃 horizontal 〃 
android : layout_width=”match_parent” 
android : layout_height=’’match_parent’’> 

</LinearLayout> 





nasa_app.xml 
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Wait now, I don’t want a 
blank screen, I want to 
see both Fragments on 
the screen! 


It’s no surprise the layout is empty... 

You created the new Activity and layout, but you 
haven’t populated it yet. The fragments need to be 
displayed on the screen too. 

Now that you have the completed Fragments and 
an Activity to display them, let’s see how to 

display the Fragments on screen. 
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adding fragments to the screen 


Add the fragments to your layout 


Fragments can be added to a screen 
in the XML layout. There is a special 
<f ragment> element added to XML 
layouts after Fragments were introduced. 


|^s d ^ood ided *bo add an 3^dv~oid ： id 
atbribu 七 e (or youv- 丁 Wis v/ill 

allow you bo v-c*tv-icvc a^d i\\t 

-fv-orw youv 3£.*tivi*ty la*tcv oy\- 

<fragment android : name =〃 
android : id =〃 



The -fully ^uali-Picd 
dldss or youir 
Joes hcv-c 


rr 



android : layout 一 width=〃wrap 一 content" 
android:layout height=〃wrap content" 


Y^u c^y\ use \rcjula\r layoui 
attvibuics oy\ a -Pvagrwc^i 
just like 叫 oihev- \/icw. 



Dumb Quest? 


9ns 


/> 


You’re defining a fragment in the layout, but assigning 
View layout attributes. Can you do that? 

Yes. You’re defining the fragment attribute and referencing 
the fragment class. But the view is rendered to the screen, and 
view attribute control how the view is laid out. 

Do I have to do any other configuration to make the 
fragment load? 

No, defining the fragment in the layout renders the view and 
instantiates the fragment class. 


Do I have to start the fragment or call any of the other 
lifecycle methods? 

• Nope! That’s all done for you automatically. 

Do I have to declare it in the layout? What if I want to 
programatically decide which Fragment to add? 

You can add fragments programatically in addition to 
declaring them in the layout. Check the online docs for more 
information. 
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working with feeds 




Below is the empty layout for nasa_app. xml. Add both the Nasaiotd and 
the NasaEdNews Fragments to this layout. Add them to the current horizontal 

Li near Layout below. Make sure to give the Fragments android : id 

attributes as you would for other Views. 


<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 

<LinearLayout xmlns : android="http://schemas.android.com/apk/res/android” 
android:orientation =,, horizontal^ 
android:layout—width= 〃 match—parent” 
android:layout—height= 〃 match—parent〃> 


</LinearLayout> 
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test the new fragments 



Below is the empty layout for nasa_app. xml. You should have add both the Nasaiotd 
and the NasaEdNews Fragments to this layout. You should have added them to the 
current horizontal LinearLayout below. You also should have given the Fragments 
android ： id attributes as you would for other Views. 


<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 

<LinearLayout xmlns : android= 〃 http://schemas.android.com/apk/res/android' 
android : orientation =,, horizontal^ 
android : layout_width= 〃 match—parent” 
android : layout_height= 〃 match—parent〃> 

ddy 

ahdvoid : id 二 

androidhlayou 七一 y/id 七 h 二 ” y/rap 一匕 oyrterrt” 
ahdv*oid:bYou*t_hd^vt= 1 ”y/\rap_dorrt€h*t W 
ahdv*oid : laYou*t_wei^vt= 1 ”l" /> 



Fully ^uali-f icd 

^lass Y\Bn\ts o( *tKc 




Tiic edu 匕 atio 灼 

r>cv/s 


a^droid^id—^^+idi/-fragmch-t^ed^ 
ar\dvoid : layou 七一 y/id 七 一匕 orrterrt” 

andhroidhlayou 七一 y/ei ☆ 七二”广 /> 


</LinearLayout> 
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Tesr DriVq 


Run the app again. At this point, you should see both of the 
fragments displaying on the screen. 


NASA Daily Image 


Orion Prepares for Next Round of Acoustic 
Testing 

Thu, 22 Sep 2011 


Refresh I Set Wallpaper 



NASA 2012 Lunabotics Competition Open For Registration 

NASA is accepting applications from teams of U.S. and international undergraduate and graduate students for the 
third annual Lunabotics Mining Competition. The event will be at NASA's Kennedy Space Center in Florida May 
21 26,2012. 

hUpMvww.fhibd.guv/fiomt/hq"ewb/2011A»efj/HO 320 LundbutiLb.hUnl 

NASA Selects Teachers For Student's Reduced Gravity Experiments 

Teachers from 14 NASA Explorer Schools (NES) have been selected for the 2011 School Recognition Award for their 
contributions to science, technology, engineering and mathematics (STEM) education. 

http , JA/\fww.nas3.go\/A)ome/hqnGWS/2011/sep/HO 11-316 Gravity Flight.html 

Plant Experiments Take Root On Space Station To Inspire Students 

A unique science project designed to sow the excitement of scientific discovery in students is sprouting this week 
aboard the international space station. 

htWJA/vww.nasd.sov/home/hanews/2011/seo/HO 11-319 ISS Plants.html 

NASA and The Cleantech Open Partner in Robotics Challenge 

NASA hos selected The Clcantcch Open of Redwood, Calif., to manage the agency’s Night Rover Challenge thot will 
culminate in a competition in foil 2012. 

hapy/www.nd^d.guv/1iumt/fiqnew^/2011A^ffj/HO 11-318 Night Ruvfff C/)dJ/etigt./um/ 

NASA Announces International Space Apps Competition 

NASA is announcing the International Space Apps Competition to support the Open Government Partnership (OGP), 
which President Barack Obama announced Tuesday. 

httpMvww.n3S3.go\/A)ome/hqn9WS/2011/s^p/HO 11-313 Space Apps.html 


The Orion MPCV ground test vehicle Is lifted into the acoustic chamber at Lockheed Martin’s 
facilities near Denver on Thursday. Sept. 15, 2011, in preparation for the Launch Abort Vehicle 
Configuration Test. For this test, the MPCV, or multi-purpose crew vehicle, is covered with fillets 
and ogive panels which resemble the vehicle’s launch configuration. The spacecraft will undergo 
testing at sound pressure levels that emulate those experienced at launch and in the event an abort 
is needed to carry the crew to safety away from a potential problem on the launch pad or during 
ascent. Image Credit: NASA 


NASA and Cafe Hosting Green Flight Challenge 

NASA and the comparative Aircraft Flight Efficiency (CAFE) Foundation of Santa Rosa, calif., will hold the 2011 Green 
Flight challenge, sponsored by Google, at the Charles M. Schulz Sonoma county Airport in Santa Rosa from sept. 25 
to act i. 

httpJ/mvw.nasa.2ov/home/hanews/2011/seo/HO Ml 1-200 Green Flight Challense.html 


k 


The Challenge Is On: Robot Prize Competition Registration Opens 

NASA and the Worcester Polytechnic Institute (WPI) in Worcester, Mass., arc seeking teams to compote in o robot 
technology demonstration competition with o potential $1.5 million prize. 

hllpMvwv¥.rtdbd.guv/liuint/tiqnewb/2011/b^j/HO 11-307 Robot Pfut.hlinl 



This screen is just a big horizontal LinearLayout 
with two large Views... the two fragments! 
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small screen testing 


Test it ow a small scrcew 

Right now you’re testing the app on the 
default tablet size for the emulator, WXGA, 
which is a sizable 1280x800. But not all of 
your users’ devices are going to be that big, 
even tablets. Let’s make a small Android 
Version 3.2 AVD to see how the app looks. 


Name tKc hW APII^- 

so you 

ky>OY/ s*I2jC air>d VCV-SIO^. 


0vcv-\ridc the dc-Pauli 
v-csoluiio^ and sei i 七 
io ^>00 % 午 00. 


Create new Android Virtual Device (AVD) 



5 nup&hDt: 


Skin: 


Hardware: 


API 13-Tab let-600-4 00 


Android 3.2 - API Level 13 


ARM (armeabi) 



O Built-in: 



0 Resdutior: 



OyerrSde the existing AVD with the same name 



Select A^dv-oid 

IX Level II. 


Clidk -finish when 

youVc dov\c- 



Launch the emulator and run the app. 
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5S54:APll3-TabJet-600-400 


NASA Daily Image 


Y^ikcs| No*t 
lookup *too 
^ood-- 


NASA 2012 Lunabofics Competition 
Open For Registration 

NASA is accepting applications from teams of U.S, 
and international undergraduate and graduate 
students for the third annual Lunabotics Mining 
Competition. The event will be at NASA's Kennedy 
Space Center in Florida May 21-26,2012. 

h ttp^/www.nasa.go v/home/hqnews/2011/sep/ 

HO 320 Lunabotics.html 


NASA Selects Teachers For 
Student's Reduced Gravity 
Experiments 

Teachers from 14 NASA Explorer Schools (NES) 
have been selected for the 2011 School Recognition 
Award forth eir contributions to science, technology, 
engineering and mathematics {STEM) education. 

http m J/vmw.nasa.gov/home/hqnews/20 f 1/sep/ 



That looks pretty awful. 

I think this screen is 
too small to display both 
fragments on the screen. 


It is definitely too small for these fragments. 

There are no firm rules about how many fragments you can 
display on the screen. These two fragments take up a lot of 
space, so they don’t work well together on small screens. They 
look great together on large screens though. 

But one way or another, you’ll need to fix this on small screens... 
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different screens, different layouts 


0 


Screen Groups Jjp Cl^se 


In Chapter 5, you build optimized layouts for small screen devices and 
landscape. Using the same R constant, layouts are dynamically loaded based 
on their screen size category (small, med, large, and a recent addition, 
x-large). These are your layout folders from Chapter 5. 



The ovi^mal 
layout. 


The la^dsda^e 
spe^i-fid layout 




The small 

sdvee 灼 layout 



Android 3.0 introduced the idea of minimium screen widths and heights 
to determine the dynamic layout loading. So instead of declaring small, 
med, or large screen widths, you can declare screen widths in Density 
Independent Pixels (DPs). 

The name of the folder determines in the screen size the layout applied for. 
And just like the screen group following the layout in the folder name, so 
does the screen size. The difference is that the width or height is specificed 
with a w or h, followed by the dimension in DPs. Screens larger then 
the specified width or height load the layouts in the folder. 



This -Poldc/s layouts will 
be loaded i-f width is 
〆 jv-catcv- QOOd^f 



This -Polders layouts will be loaded 
i-f the width is yeatev 十 OOdf ， 

but oY\bj up -to GOOdf i-P the layout- 
y/0OOdp -fildev- is mduded also. 


For newer versions of Android, either the old style screen groupings or the new minimum 
screen size approach will work. However, older versions of Android require the older style 
screen grouping approach. The new and old screen grouping approaches can work together, 
and you’ll need to do that ifyou plan on supporting older versoins and new versions of 
Android in the same app. 
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working with feeds 


Use two optimized layouts 

Since both of the fragments won’t really fit on the 
small 600x400 screen, let’s make special layouts for 
large and small screens according to the minimum 
screen width and height optimized layouts in 3.0. 


Om large layout 

If the screen is large enough, display 
both of the fragments side by side. 
Depending on your target devices and 
application content, this size might 
vary. For the Nasa App, let’s define the 
minimum size as 800 pixels for side 
by side fragments. This will be a new 
layout specifying screen sozes 800 pixels 
wide or above. 


greater than 800 



Image of 


Education 


the Day 


News 

1 



One small layout 

If the app is less that 800 pixels, just 
display the Image of the Day 
fragment and not the Education 
News. This will be the layout in / 
res/layout/main.xml. 


less than 800 
< - 


Image of 
the Day 
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creating custom layouts 


Create the large scrccw layout 

Just like the landscape mode, newer versions 
of the Android Eclipse Plugin allow you 
to configure the minimum layout width 
directly from the new Android XML File 
wizard. Launch the wizard now and create 
the large screen optimized XML layout. 


Mew Android XML File 


The -f ile should 

be 


Sclcd*t smallest 
>Mld 七 


New Android XML File 

Creates a new Android XML file. 




Project CH06_N AS A_l m ag e_of_the_Da y 


Browse.. 


main.xml 


Whal type of resource would you like to create? 

::::： Layout Values 

Q Color List Animator 

O Preference CJ Searchable 

What type of resource configyralion would you like? 
Available Qualifiers 
WCountry Code 
llin Network Code 
語 Language 
^ Region 

Smallest Screen Width 
Screen Heigh! 

■2l5ize 
ai Ratio 


Q Drawable 
Q Animation 


Q Menu 

Q AppWidget Provider 


Chosen Qualifiers 
wSOOdp 


Screen Width 



£n*tcv ^00 
heve as 七 he 


Press -f rnisK" 
y/hcir> youVc 
doiaC- 
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working with feeds 


Screen. 

This week’s interview: 

How do you keep it all straight? 


Head First ： Thanks for taking time out of your 
busy schedule of laying out screens and determining 
which layouts to use to come and talk to us. 

Screen Support ： A pleasure, as always. 

Head First ： You know, I thought the small, normal, 
and large screen sizes which seemed a little hard 
to keep track of. Then I learned about screen pixel 
density and seemed like a LOT to keep track of. 

Screen Support ： Ah yes, the good old days. 

Head First ： The good old days? 

Screen Support ： Yes. Back then I just had one 
system of screen sizes to keep track of. Now I have 
to keep track of all of that, plus the new system of 
defining widths directly in the folder name. 

Head First ： I honestly don’t know how you do it. 

Screen Support ： Oh it’s not that bad. I just have 
an algorithm I follow to figure out which resource to 
use. It’s not like I’m making random decisions myself 
or anything. 

Head First ： But don’t developers get frustrated 
trying to nail down the different resources? 

Screen Support ： Some do. But they get used to 
my algorithm and then they know what layouts to 
build for what screen sizes. And they know which 
to override to make some device work the way they 
want. 

Head First ： I’m still shocked that this doesn’t 
confuse you, all of these different layouts in the same 
app! It would drive me nuts! 


Screen Support ： If you want to really go nuts, 
check out all of the other overrides you can do for 
each layout in addition to size and pixel density. 

Head First ： You’re kidding, there’s even more? I 
had a hard enough time keeping up with this already! 

Screen Support ： Sure! You can also override 
layouts by input type. Say for example you have an 
app with an on screen numeric keyboard for touch 
screens. You can customize the layout for 12-key 
devices to remove the keyboard since they already 
have hardware buttons. 

Head First ： OK, this is just getting out of hand. 

Screen Support ： And I’m not even done! You 
can also customize your layouts by locale. Say for 
example, you’re working with a language that reads 
right to left instead of left to right. You can add 
customized layouts that reverse parts of the screen 
for those languages. 

Head First ： Enough already! You lost me with the 
12 key devices! 

Screen Support ： Like I said though, it’s a piece of 
cake. 

Head First: Of course, its the algorithm right? 

Screen Support ： Sure is! It’s all in the algorithm. 
As long as we both follow the same rules, there will 
be no nasty surprises! 

Head First ： I’m going to take your word for it. 

Screen Support ： Suit yourself! Just remember, 

I’m here when you need me. 
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building the layouts 



JtoH? ExeRciSe 


Below are the layouts for the main. xml in both the the res/layout folder and the 
res/layout-w 800 dp folder. Modify the main. xml in the layout folder to display just 
the Nasaiotd fragment for small screen devices. Also modify the currently empty layout 
in layout-w 800 dp/main. xml to show both fragments. 


<?xml version= 〃 l.0 〃 encoding= 〃 utf-8〃？> 

<LinearLayout xmlns : android= 〃 http://schemas.android.com/apk/res/android” 
android : orientation =/, horizontal^ 
android : layout—width= 〃 match—parent” 
android : layout—height= 〃 match—parent〃> 

〈fragment android : name="com•headfirstlabs.chO6.nasa.iotd.Nasaiotd" 
android : id= 〃 @+id/fragment—iotd” 
android : layout—width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 
android:layout—weight= 〃 l 〃 / > 

〈fragment android : name="com•headfirstlabs.chO6.nasa.iotd.NasaEdNews 
android : id= 〃 @+id/fragment_ed—news 〃 
android : layout—width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 
android:layout—weight= 〃 l 〃 / > 

</LinearLayout> 



nasa_app.xml 
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<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 

<LinearLayout xmlns : android= 〃 http://schemas.android.com/apk/res/android” 
android : orientation=’’horizontal” 
android : layout—width= 〃 match 一 parent” 
android : layout—height= 〃 match—parent〃> 


</LinearLayout> 


layout- 

w 800 dp 



nasa_app.xml 


you are here ► 


255 















building the layouts 



Exe^ciSe - 

LutlOH 

Below are the layouts for the main • xml in both the the res/layout folder and the 
res/layout-w8 0 0dp folder. Modify the main. xml in the layout folder to display just 
the Nasaiotd fragment for small screen devices. Also modify the currently empty layout 
in layout-w800dp/main. xml to show both fragments. 


<?xml version= 〃 l.0 〃 encoding= 〃 utf-8〃？> 

<LinearLayout xmlns : android= 〃 http://schemas.android.com/apk/res/android” 
android:orientation= 〃 horizontal 〃 
android:layout—width= 〃 match—parent” 
android:layout—height= 〃 match—parent〃> 


〈fragment android : name= 〃 com.headfirstlabs.chO6.nasa.iotd.Nasaiotd" 
android:id= 〃 @+id/fragment 一 iotd” 
android:layout_width= 〃 wrap—content” 
android:layout—height= 〃 wrap_content 〃 
android:layout_weight= 〃 l 〃 / > 


〈fragment an^oid : name=〃com • headf irstlabs . chO 6 . nasa . ioi^. NasaEdNews 

android: id^^-id/ f ragment—ed—news’^^^ 

_ * small layout 

android : layout : u" 丄 ✓ . ,' 

^ _m layout/maih.xrhl 

android: should ohly dohtaih the 

android:layout_weight= 〃 l 〃 / > - l^sssloid So 

代你 ove ihc cduaiiov) 

y^cv/s -Piragmch-t. 


</LinearLayout> 



nasa_app.xml 
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<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 

<LinearLayout xmlns : android= 〃 http://schemas.android.com/apk/res/android” 
android:orientation= 〃 horizontal 〃 
android:layout—width= 〃 match—parent” 
android:layout—height= 〃 match—parent〃> 


entire 

layou*t/mam'x.w'l 
move -to 七 lav-jc 
stv-eeb layout. 


ahdroid ： r\ar«e— >; dom.head-fiv-stlabs.dhOi.hasa io*td.Nasa|o*td , 
dhdv*oi d :i d^^+id/er\*t_io*td” 
andhroidhlayou 七一 >/1(1 七 11 二’’>^外 一 dorrterrt” 
ahdhroid : layou*t_hei3h 七二 
andvoidhlayou 七一 y/eiglvt 二 "I” /> 


<-fv-a3^eh*t 己 om.head*firs*tlabs.dhO^>.hasa io*td.NasaE<l/Ve>ws w 


ahdvoidhid? 沴 +id/-f\ragmcr\*t_cdi_ 
a^dv-oid^ayou^width^wv-ap^oh-tch-t^ 
andvoidhlayou 七一 hei# 七二 ” wrap 一己 oyrterrt” 

andvoidhlayou 七一>/€吵七二 ”1” /> 


</LinearLayout> 




layout- 





XML 


叫 叩， 
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testing on multiple screen sizes 



Tost DriVq 


Now that you have optimized layouts for small screen and large (over 
800 dp width) devices, run the app again and make sure it works on 
both devices. Use the AVD selection dialog in Eclipse to run the app 
on both AVDs if you are running them at the same time. 


5556:API13-Tablet 



NASA Daily Image 

View of Mission Operations Control 
Room During the Apollo 13 Mission 

Prl . 30S « p2011 


Refresh Set Wallpaper 


Gene Kranz (foreground, back to camera), an Apollo 13 Flight Director, watches Apollo 13 astronaut 
and lunar module pilot Fred Haise onscreen in the Mission Operations Control Room, during the 

fourth television tran^mK^ion on thp evening of April vs. is/o. shortly after the 倉、 
Udnbmlbbion. dn explobion occurred Ihdl ended dny hope of d lunar landing dnd jeopcirdized Uie IT 
lives of the crew. Image Credit: NASA /M 


NASA 2012 Lunabotics Competition Open For Registration 

NASA is accepting applications from teams of U.S. and international undergraduate and graduate students for the 
third annual Lunabotics Mining Competition. The event will be ot NASA's Kennedy Space Center in Florida Mjy 
mi. 

hlluyA^ww.ndbd.Jiov/tiunie/fiuiiWf^2011/^eu/HO 320 Lund0vlky.hunl 

NASA Selects Teachers For Student's Reduced Gravity Experiments 

Tcochcrs from 14 NASA Explorer Schools (N£S) have been selected for the 2011 School Recognition Award for their 
contributions to science, technology, engineering and mathematics (blhM) education. 

htipy/www.n3S3.gov/home/hqn€ws/20J t/sep/HQ n-316 Oravixy Flighthtml 

Plant Experiments Take Root On Space Station To Inspire Students 

A unique science project designed to sow the excitement of scientific discovery in students is sprouting this week 
^bo^rd thp IntprnAtinn^l 咖 rp Station 

http:/mww.nas3.£owhome/hqr)ews/2Uii/sep/H(j ri3n(s.html 

NASA and The Cleontech Open Partner in Robotics Challenge 

NASA has selected The Cleantech Op«n of Redwood, Calif., to manage the agency's Night Rover Challenge that will 
rulminAfp in a rompprition in t^ll 7017. 

tmpi/zmMj^ss 柳 /home/t)Qnews/2inusep/Hi) ii-JUf Night Hover ch3Henge.html 

NASA Announces International Space Apps Competition 

NASA is announcing the International Space Apps Competition to support the Open Government Partnership (OGP), 
which President Barack Obama announced Tuesday. 

http/Mwwgov/hnmp/hqnpw^/P011/*ifip/HO 1 /♦?/ ? ^cp App^html 

NASA and Cafe Hosting Green Flight Challenge 

NASA and ihe Cumpdrdiive Airudfi Fli^lu Efficiency (CAFE) Foundation of Sails Rubd, Cdlif., will hold (he 2011 <km 
■Flight Challenge, sponsored by Google, at the Charles M. Schulz Sonoma County Airport in Santa Rosa from Sept. 25 


f/sep/HO Mf 


Green Flight Challeng e “ 


The Challenge Is On: Robot Prize Competition Registration Opens 

NASA and the Worcester Polytechnic Institute (WPI) in Worcester, Mass., are seeking teams to compete in a robot 
technology demonstration competition with a potential $1.5 million prize. 

hlluyMww.ndbd.jiov/t)unie/tiarwwV20J 1/beu/HO 11-307 Robot Frue.hUnl 






The Idira^ 

-rov-ma-t 
still looks good- 
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working with feeds 



That looks great! Add 
more content only where 
it works. Perfect! 


Fragments made is all possible 

This is a perfect example of customizing your app 
to render more or less content based on screen size. 
And with fragments, it was easy to just add or remove 
content (and the functionality to support the content 
like the feed refreshing) just from your layouts without 
having to move a lot of code around. 


/W 七 ^ small 
screen 

looks ^rca 七 -too. 

^ ^ ^ 5554:API13-Tablet-600-400 






NASA Daily Image 


jew of Mission Operations Control 
Room During the Apollo 13 Mission 

Fri, 30 Sep 2011 


Refresh Set Wallpaper 






: Ai. ia 

， - 
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testing functionality 


Test the app fuwctiowality 


Speaking of functionality, this is a great time 
to test the app and make sure everything 
works. You already know the feed is 
refreshing correctly, but what about scrolling 
and the on screen buttons? 


Ouclv! Tlve 


app craslved! 


5556.API13-Tdblel 



Student's Redded Gravity Experiments 




igistration 



Oflexpecte 


ol Rccosm 


pace Station To Inspire Students 

emefil uf buefilifie dibcuvety in bludeiilb buru 


tner in Robotics Challenge 

B falif. to fhp Appnry\ Nipht I 


Force close 


ice Apps Competition 


)pcr 


iment Portn' 


Gene Kranz (foreground, back to camera), an Apollo 13 Flight Director, waic 
ond lunar module pilot Fred Holsc onscreen In the Mission Operations Cont 
mKslon^ fourth tPlPvKion tran^mKslon on the evening ot April 1' 1970. S 
transmission, an explosion occurred that ended any hope of d lunar Idndlng 
lives of the crew. Imase Credit: NASA 


Apollo 13 astror 
loom, durin 
ly after the w 
ieopardized if 


NASA and Cafe Hosting Green Flight Challenge 


The Challenge Is On: Robot Prize Competition Registration Opens 


NASA dnd the Worcester 
technology demonstratii 


I a potential Sl.!> million prize 


H ： H1 
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working with feeds 


Why is the app crashing? 

The feeds are loading correctly, and 
scrolling works. But when you press the 
butons, the app is crashing. Here is the 
output. 


java.lang.IllegalStateException : 

Could not find a method 

onRefreshButtonClicked(View) in the activity 
class com.headfirstlabs.chO6.nasa.iotd.NasaApp 
for onClick handler on view class android.widget.Button 
with id 1 refreshButton' 





Can you figure out what the error is referring to? 
Why might this error be occurring? How would you 
fix it? 
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fixing the onClick methods 


Add owClick methods to the activity 


To make the buttons work, you added 
android : onClick attributes to the buttons 
and corresponding methods in the Nasalotd 
Activity. There’s just one big problem... 

Nasalotd isn’t the Activity anymore, it’s a Fragment. 

NasaApp is the Activity now. So even though 
you have the corresponding onClick methods 
in Nasalotd, the Android action code is 
looking for the android : onClick methods in 
NasaApp. 



\ 、丨 （ / 


NasaApp 


^ - 


of -the Pay 


Edudd'bioh Ncv/s 



ohRc-fvcshBu't'fcohClidkcdO 
ohSctlVall papcvO 


TVic methods avwb m 

iUc ^ 
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working with feeds 


Make the buttons work 


Both of these methods are already implemented in 
Nasalotd, they just aren’t receiving the event since 
they are a Fragment not an Activity. So all you really need 
to do is pass the event to the Fragment. 

You can pass the event to the Fragment, but first 
you need to get a reference to the Fragment from the 
Activity so you can call the onClick methods in 
the Fragment. 

That is where the FraQnientManager comes 
in. The FragmentManager allows you to retrieve 
references to Fragments. The following code 
implements both of the onClick methods, retrieves the 
FragmentManager and calls the underlying method 
in the Fragment. Fragment 



this! 


Add these two methods to the 
NasaApp Activity. These 
receive the expected onClick 
calls and pass them along to the 
underlying Fragment. 


心 t the Firagr^ch-t/VIahaa^. 

V 


public void onRefreshButtonClicked(View view) 

FragmentManager fragmentManager = getFragmentManager(); 

Nasalotd nasalotdFragment = (Nasalotd) 

fragmentManager. findFragmentByld (R. id. fragment_nasa_iotd); 

nasalotdFragment • onRef reshButtonClicked (view) / - - - p^ ss ^\\ 


Pmd 七 he 

-fmdF^ajrwchiByld- 


■bo 


public void onSetWallpaper(View view) { 

FragmentManager fragmentManager = getFragmentManager(); 

Nasalotd nasalotdFragment = (Nasalotd) 

fragmentManager. findFragmentByld(R. id. fragment_nasa_iotd); 

nasalotdFragment•onSetWallpaper(view); 




NasaApp.java 
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testing the on Click fix 



Tesr DriVq 


Now that you added the onClick methods to the NasaApp 
Activity, run the app again and see if the force close is resolved. 


5556:API13 Tablet 






NASA Daily Image 

View of Mission Operations Control 
Room During the Apollo 13 Mission 

IH 30 Sep 2011 


Refresh 




WAS^2C 

acc 


bene Kranz (foreground, back to camera), an Apollo li Might ⑶ rector, watches Apollo 13 astronaut 
and lunar module pilot rred liaise onscreen In the Mission Operations Control Room, during the 
mission’s fourth television transmission on the evening of April I3 r 1970. Shortly after the 
transmission, an explosion occurred that ended any hope of o lunar landing ond jeopardized the 
lives of (he crew. Inirige Credll: NASA 


MAS^2012 Lunabotics Competition Open For Registration 

accepting applications from teams of u.s. and international undergraduate and graduate students for the 
third annual lunabotics Mining Competition. The event will beat NASA's Kennedy Space Center in Florida May 
21^2012. 

hnp>^vww.rMVfov/homp/f)qnfiw^/?Qt tAfip/HO ^?Q i un^boric^hrm/ 

NASA Selects Teachers For Student's Reduced Gravity Experiments 

Teachers from 14 NASA Explorer Schools (NES) have been selected tor the 2011 School Recognition Award tor their 
contributions to science, technology, engineering ond mathematics (STEM) education. 

hnp://wwwnA^i^ov/finmp/tiqnfiw^/POI lApp/HO 11-^16 GrMiry FUgtnhrml 

Plant Experiments Take Root On Space Station To Inspire Students 

A unique science project designed to sow the excitement of scientific discovery in students is sprouting this week 
aboard the International Space Station. 

hltp/Avww.rMSti^uv/fii)tnf*/lMi!ww\/7011 /»?/9 PLnil\.hlml 

NASA and The Cleantech Open Partner in Robotics Challenge 

NASA has selected I he cleantech op 分 n of Redwood, calif., to manage the agency's Night Rover challenge that will 
culminate in a competition in tall 2012. 

tUlpj7\vww iM 、 inui/ /tn?!iit/hqnew!k/7011Attp/HO 11-318 Ni^Iit Rover Cltdlla^t.hUnl 

NASA Announces International Space Apps Competition 

NASA is announcing the international space Apps competition to support ttie up^n bovernment Partnership (UOF) # 
which President Barack Obama announced luesday. 

hltpy/wvvw.ndSd^uv/tiuiiit/ltqnews/2011/Sefj/HO 11-313 SfMte App^htin! 

NASA and Cafe Hosting Green Flight Challenge 

NASA and the comparative Aircraft Flight Efficiency (CAFE) Foundation of Santa Rosa, calif., will hold the 2011 Green 
Might challenge, sponsored by Csoogle, at the Charles M. Schulz Sonoma county Airport in Santa kom from !>^pt. 2!> 
to Oct. 1. 

hltn /Avww rMSHifuv/lujmH/ftnnt^rJPn 1 Ml 1-200 Cirtmi Fliyiu ChfttltHiyj* hltnl 


The Challenge Is On: Robot Prize Competition Registration Opens 

NASA and the Worcester Polytechnic institute (WPi) in Worcester, Mass., are seeking teams to compete in a robot 
technology demonstration competition with a potential $1.5 million prize. 

hltpyAvww.ndSd^uv/lioint/ttqnews/201 JAtefj/HO 11-307 Robot Pn/tJuml 


No errors! Now check the home screen to 
see if the wallpaper was set. 
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The wallpaper 
setting looks great! 


working with feeds 



5556:API13 Tablet 


Brilliant work 

You’ve got the complete Nasa Image of the Day 
app is working great. The tablet app is running 
with Fragments so you can easily add and remove 
on screen content based on screen size. And this 
was on top of the already super customized layout 
work you did in Chapter 5. This is one tuned app! 


you are here ► 


■App 


select music. 




鬌 






This is just a fantastic app! 
Cool images, optimized for 
tablets in various sizes. I’m 
impressed! 
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wrapping up 



GaOff Piste 


That was some great work you did Fragments in this chapter, and all of the other work 
on the Nasa Image of the Day. Here are some ideas for additional exploration. 


"ew A^iviiics -for Small Devices 

|h this dhap-tev-, you Ohly showed -the Image 

J Day \oy small devices. Bui 

&du^d*tioh Cdiy\ be ih*tc\rcs*tih^ 

从七饮 \rcadihg dhafic\rs 7-^ a^d leavVmg 
mo,rc 此 0 u *t addiiiohal A^iiviics m 

your app, Creaic a second Acidly usih^ -the 
same iwo -fvagmchts. Thch you should be 
able *to show boih -firdgmeh-b ih ohc A^iiviiy 
ov* ohC Pv'^^r^Ch't Cddh ih "two di*f*fcV"Ch 七 
Activities. 


Rc-Pv-csK b 。 七 h Fv^a^mc^-U 

The vc-fvcsli button ohly v/orks-fov* *tV>c 

Ima^e of ihc Pay FVa ， eir\*t. A*fW 

mov'm^ bu*t*bo^s ou*t {ht |may 
make -the v-c*fv-csh button 
v-c-fv*csli bo*th Fv*a^mcir>*ts- 


色吁 love Additional Ovcv\ridcs 

\y\ addition "to sdvccy\ siz-c pixel density, 
you cav\ dus-tomizjC layouts based or\ device 
hav-dv/av-c -fovm -fadtov-s. Try build'm^ a 
dus-bom layout *fov a s^edi-fid *fov-m 不 ad 七 ov 
(like 3 device v/i*tKou*t "toudK street suppov 七 ). 
TV 竹 CYtait A\/P ^ 七'^七 do^i^uvatioh. 

Tes-t -thai youv- overvide v/ovks av\d docs 竹七 
t^tcA, o*tKcv* -fovm ^3d*tov-s. 


/Wove "the buttohs 

The v*c-fv*csh 3 hd set wdllpapcv* bu*t*tohs 
look a bi*t ^lu-ttcv-cd ih -the -fv-agmCh-t Oh 
s^vcch. Alovc them -to d buttoh bdv, ov- 

as iiems (a-ftev- you ledv^h about 
■them latcv- ih -the book). 
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Your Android Toolbox 

Now that you’re getting a 
handle on optimizing for 
tablets, you can build all of 
your apps with tablet support! 


Corwev 七… 3 "to Fv- 

• 七 \^sitaA ^ 切 

• Call y 七姊吻 0 bcW a^v A^Wity 

m e*tW you called m A^Woure 

do^vcrtm^ 

參 Update onCl— 七 W 
vely 岣⑼細 d ： addcss -to 

@ Make a”Y layou-t ^datcs needed ^ 

^ layout a^cv 

smde .WilUo U^beU sdree. 


VlCV/ 


" ew Sdveth Coh-fijuvaiioh 

w7Z0 ； layouis " w 

720 d/vlT 如咖 “ iS & W 

!^ lso ih 仏吻 

Layouh ih 〜撕午却釧 

load ^ the s^e, is ai least loi^ d? 

h ^\ also usc sliest width whidh 

177 ) 

ohly Iw ^ both the width A/^D the 
nci^ht avc gveatev £hah 6 00dp. 




BULLET POINTS 


■ 


■ 


■ 


■ 


■ 


■ 


■ 


■ 


■ 


Install new Android versions as needed 
using the SDK and AVD Manager 

Make new AVDs for new versions 

Set the Android version for your project in 
Project Preferences 

Combine multiple Activities on one 
screen using Fragments 

Convert existing Activities to 
Fragments, or write new Fragments 

from scratch 

Override Fragment lifecycle methods 
as needed, specifically onCreate, 
onCreateView and onStart 

Return the Fragment view in 
onCreateView, don’t set the content 
view from a Fragment 

Inflate layouts with Layoutinf later 

Add Fragment in layouts (or in code). 
Then the layout is inflated, your fragment 
will be automatically created, started and 
connected to the launching Activity. 

Fragments are supported back to Android 
1.6. View the Android Compatibility 
Package for more information: http ： // 

developer.android.com/sdk/ 
compatibility-library.html. 
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本 Building a list-based app 


Really, old man? 
Bugging me again 
about making lists? 


I sure am! It says 
right here on my list 
to bug you about it. 


Where would we be without lists? They display read-only information, 
provide a way for users to select from large data sets, or even act as navigational device 
by building up an app with a list-based menu structure. In this chapter, you’ll learn how to 
build an app centered around a list. You learn about Adapters where lists store their data, 
and how to customize the data rendered in your list. 


this is a new chapter 





building a time tracker 


Vomdi is framing for a big race 


Donna jogs all the time, but she hasn’t raced before. There 
is a big race coming up and she wants to be in super shape 
to get a great time. 


Donna knows the only way to improve is to train 
consistently and track her progress over time, constantly 


improving any issues. She wants to track her progress on 
her Android phone since she always has it with her. But she 
doesn’t like any of the apps she’s found. 



I just want a simple 
app where I can enter my 
time and notes. No bells 
and whistles! 


All of the apps she’s found 
are too complicated. 

She’s found lots of tracking apps, but 
they all use GPS, have subscriptions, or 
just make things too complicated. Donna 
asked you to build the simple time 


tracker app for her, and as a good friend 
how could you say no! 

M 
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— — — — — — — — — — — — — — — — — — —-l 

TIME LIST SCREEN COIXSTIUJCIIOIX 1 . 

Donna gave you this sketch for the time tracker app’s time list screen. It’s a pretty simple screen with the list of 
times and notes, just like she said. | 


the -time ih 

沒匕 h v-ow usiha a 

•s ihe mos-t impo^-taht 



Needs -to be able 
{jo stroll verb 乙 ally 
oy\U -tVicv-c av-c -too 

你 aq times -to »*b 

OY\ -tV^c SCrttY\ 




But which View should you use to implement this sketch? 



L 
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Plan the implementation 

You have a pretty clear sketch of the app to build, and now 
you need to decide how you’re going to implement it. You 
could create a LinearLayout and add Views dynamically 
based on the items to be displayed and then put that 
LinearLayout in a ScrollView. 



Hmm... I feel kind of 
uncomfortable about that. 
WouldiVt that mean quite a 
lot of repetition? 


He’s right. 

While that would technically work, it seems a little less 
than ideal. You’d be repeating the same layout over 
and over again in the list and you’d have to somehow 
synchronize the views on screen with the data stored 
in your Activity. But what’s the alternative? 



Gee| B 形 


You can get a reference to a ViewGroup using findViewByld. Once you have 
the ViewGroup reference in code, you can programatically add Views to 
that ViewGroup at runtime. This isn’t done in any of the book examples, 
but it can be really useful way to declare most of your layout in XML and 
add a bit of dynamic behavior. 
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Wouldnt it be dreamy if there 
were a built in way to manage 
lists of information. But I know 
ifs just a fantasy... 
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Use ListView 


ListView is a built in Android View that 
displays items in a vertical list. It has built in 
functionality for most of what you’d want a 
list to do- like automatically scrolling when the 
screen is filled with data, as well as a clean way 
to separate your data displayed in the list from 
the ListView itself. 


The many pieces of a ListView 

ListView isn’t just a View, it actually 
a complete ViewGroup on its own. A 
ListView contains Views for each of the rows, 
which are then added to a single ViewGroup 
and added to the ScrollView so the list can 
scroll. And this is all done internally inside the 
ListView. The end result is that a ListView 
is a ViewGroup, not just a View. 


You’ll *fihd 
Listl/icws all ovcv- 
A^dv-oid. I+CV-C s 
ah example o-P a 
Lis-tl/icw used ih 
the About PhohC 
-Pv-om the 
A^d\roid 



Wireless & networks 



C Call settings 


Sound 


0 Display 

EH Location & security 
0 Applications 


Arrm i ntr J?- ^yrnr 


f\ \/\t^ for 


The \/icv/^\rouf 

that will be ddded 

*to ScrollView 




Wireless and netw 



Disp.ay —— 
Location and security 



Accounts and sync 

_ -^― — 4 



r 


The ihtcv-holl 
£d\roll\/icw -fco 
suppo\rt s^rollmg 
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Add a ListView to your scrccw 


Any ViewGroup (like a LinearLayout or the 
ScrollView, or even any View) can be added as the 
root element of the layout. And since you want to stretch 
the ListView fill the entire screen, the ListView is 
the one and only View you need in your layout. Add it to 
the layout in main . xml as the root View and adjust the 
width and height to fill the screen. 


The c^*tiv-c layout -fov ma'm. 
%n\\, whi 匕 h is -the layout 
-fov TimcT\radkc\rA^t» v »*by 


<ListView 


Por /七 -fov-yt *to add the 的 s a*t*tv-ibu*tc s'mdc 

-this is voot element the layout 


xmlns : android= 〃 http://schemas.android.com/apk/res/android' 


android:layout-width= 〃 fill_parent 〃 
android:layout-height=”fill—parent' 
/> 




the Listl/icw 

S"brdli "to o-p 

the sfivcch, both vcvtitally 
ahd hov-izoh-tally 





TesT DriVq 


ll I 5:54 


TimeTracker 


as yvo-tWm^ V^as 
added 


•、s 切， 


Run the app, and you’ll see an empty screen. 
This isn’t surprising since you added the 
ListView, but the the ListView has no 
data to display yet. 


Let’s add some data to the lists 
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Lists are populated with data from adapters 


ListViews don’t actually contain any data themselves. 
That’s why you didn’t see anything on the screen for the 
first Test Drive. The ListView was in fact on the 
screen, but it was empty so the screen appeared empty. 

You can populate your ListView's with using an 
Android Adapter. Adapter is an interface whose 
implementations provide data and the display of 
that data used by the ListView. ListViews own 
Adapters that completely control the ListView's 
display. 



Ada\>*tcv-s wbrol 七 he 

displayed m l'«st 
as y/cll as Kov/ *to display 


Communication methods 

The Adapter interface includes a number of methods 
to communicate data to the ListView. This includes 
methods to determine how many elements need to be 
displayed, and to retrieve specific items. 


The Lis-t\/icw. 





getCount() 




getltem(0) 



''Wireless and 
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Control methods 

The Adapter interface also includes methods that 
control the display of that data like getView () that 
creates and populates a View that is displayed in the 
ListView. 




£ Gee} Bits - 

鼉—— 

Android Listviews and Adapters are not clearly separated according to Model 
View Controller (MVC) lines. With MVC, you completely separate the data (the Model 
in MVC) from the display (the View in MVC) with communication facilitated by the 
Controller. However, Adapters perform Controller functions as well as some View 
and Model functions. This isn’t a problem, and you can still properly organize and 
encapsulate your View and Model code. Just be aware that you won’t always have the 
clear MVC separation you have in some other Ul frameworks. 
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Puild your own Adapter 

You can populate your list with data by building your 
own Adapter. Adapter is an interface and you can 
implement your own from scratch. 

Buy why build your own Adapter completely from 
scratch when there is a much easier way to go! Android 
provides an Abstract class called BaseAdapter 
that has most of the Adapter methods already 
implemented for you. 

Start by creating a new class in your project called 
TimeTr acker Adapter and make it extend 
BaseAdapter. 


bc-foVC 

abstv-ad*t me 七 hods. 


public class TimeTrackerAdapter extends BaseAdapter { 




TimeTrackerAdapter.java 


tWeiare ng o 

Dumb Questions 


Do I have to use BaseAdapter? 

No, you can write your own Adapter implementation from 
scratch if you choose. 

When would I want to do that? 

There are a number of different reasons you may want 
to write your own. BaseAdapter handles a lot of the Adapter 
implementation for you, but if you want something custom or 
extremely optimized for your app, you may need to write your own. 


Is there any downside to writing my own Adapter? 

Writing your own Adapter is completely fine. But it does take 
some work to rebuild what you get for free with BaseAdapter. Plus, 
if you use BaseAdapter, the BaseAdapter implementation could be 
improved pver time. And if it is improved, you’ll get that benefit for 
free too. 

So is it a good idea to use BaseAdapter? 

For the most part, use BaseAdapter unless you have a good 
reason NOT to. 
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Implement the abstract methods 

Now implement the abstract 
Base Adapter methods. The easiest 
way to do this in Eclipse is to go to 
the Eclipse menu and select Source 
Override /Implement methods. 


r TimcTv-adkcv-Adaftcv- dlass 

*tV>C 

absiv-ad*t BascAdaf*tcv* me 七 iiods. 
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Puildmg out the adapter 

Now you have a Base Adapter 
implementation, but it still doesn’t store 
any data for your list. It’s just filled with 
autogenerated methods that will compiles, but 
don’t do anything useful yet. 

Here’s what you;re going to do to make this 
adapter work for you! 


1. Create a data object 

Based on the app design, you’ll need to store a 
time and note for each time entered. Rather than 
separately storing that information, create a data 
object to store both fields in a single object. 



Create 3 d3"t3 object tailed 

T'lmcRctoV-d bo s-tov-c 

-f 0 v- a tiw'C cr\*tcv-cd- 


t. Add an Arraylist of data objects 

Now that you have the data object for a single time 
record, add an ArrayList to store these data 
objects in your Adapter. 



$. Complete the adapter methods 

Now that you have the ArrayList of your data 
objects, you can finish implementing the Adapter 
based on the data stored in the ArrayList. 


Cornplctc "the methods 
七 he r\ev/ lisi o( data objects 
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Create a data object 

Start by creating the data. Since it’s an object 
storing all of the information for a specific time, 
call it Time Re cord. It should have two variables, 
one for the time and one for the notes. Add a 
constructor, getters, and setters for both variables. 



0>pe 


public class TimeRecord { 

private String time; 
private String notes; 

public TimeRecord(String time. String notes) { 

this.time = time; 
this.notes = notes; 


public String getTime() { return time; } 

public void setTime(String time) { this.time = time; } 

public String getNotes() { return notes; } 

public void setNotes(String notes) { this.notes = notes; 



TimeRecord.java 


fMs! 




Create the TimeRecord class 
in your project. Add the the 
code above to the new class. 
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i^harpen your pencil 


Below is the Time Tracker Adapter code with the autogenerated methods Eclipse 
created when you implemented the BaseAdapter methods. Using the TimeRecord 
data object, complete the data methods getCount,and getltem (getltemld is done 
for you). You’ll also need to create a collection to store these objects. 


public class TimeTrackerAdapter extends BaseAdapter 


public TimeTrackerAdapter() 




Add a tollcdtioy> *to 
s*tovc T.imeRMovds as a 
mcmbcv vav-iablc- 


public int getCount () 
return -1; 


public Object getltem(int index) 
return null; 


This \us*t ir>ccds *fco vc*tuv^ a ur>*i<\uc IP 
-Pov tiic data. /W smdc mdcx. 

IP *|S u^'l^ue -fov* d V*0>w, S*tcly>davd 
jus*t *to vc*tuvv> 


public long getltemld(int index) 

vc*tu\nr\ *mdc>c ； 


rG Li 




public View getView(int index. View view, ViewGroup parent) 



return null 



imr»plcmr»cir>*t 七 hat method a-Picv- 
-f'mishrnj 七 he data wthods. 



j ^ 

dlass Foo{ I 

o 


TimeTrackerAdapter.java 
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Adiaptcvs ^Kfo$e^ 

This week’s interview: 

Combining your Data and Display: Good or Bad? 


Head First ： Hi Adapter, thanks for joining us! 

Adapter ： Always a pleasure. 

Interviewer ： Let me get right down to business. 
Most user interface frameworks are pretty serious 
about very clear Model View Controller (MVC) 
separation, but not you. 

Adapter ： What can I say? I’m a renegade. 

Head First ： Aren’t you afraid the Design Pattern 

Police are going to come after you? 

Adapter ： One step ahead of you! I was worried 
people would start clamoring about how I’m not pure 
MVC and all that, so I changed my name. I’m not a 
Model, Controller, View, or any combination of them. 
I’m my own Object. That’s why I’m called Adapter. 

Head First: Fair enough. Do you find it confusing 
to have all of that logic for data and views in your 
implementations? 

Adapter ： Not really. Most of the time, the data I’m 
storing is directly related to me and why I’m on a 
screen in the first place. Maybe I’m displaying a list 
of States for selection in an Address entry process or 
maybe I’m displaying read only data like the times 
in the TimeTracker app. I can also be used as a 
navigation device with nested menus. Most of the 
time my data storage is pretty minimal and directly 
related to displaying it. Really, it just makes sense to 
keep it together. 


Head First ： Sometimes it must get confusing though, 
right? 

Adapter ： Absolutely! If I’m displaying a huge list of 
information that’s stored elsewhere (say in a database 
on the phone) I don’t want to bloat myself by storing 
that data inside me AND in the database. That would 
be wasteful. 

Head First ： And what do you do then? 

Adapter ： Well, there is nothing saying I have to store 
the data in me! I just have to facilitate providing that 
data to the ListView. I could easily lop off a piece of 
myself and turn that into a pure data source. As long 
as I have a reference to that new data source, I can 
ask it anything that the ListView asks me- how many 
rows, the data for a row and so on. 

Head First ： I like the fact that you can still separate 
out your data and provide it to the ListView. That 
lopping off bit sounds painful though! 

Adapter ： Oh, it’s not so bad. 

Head First ： And there you have it. Adapter, the 
renegade MVC recluse, with the ability to control it’s 
own data and display. Thanks for joining us! 

Adapter ： My pleasure! Thanks for having me. 
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Below is the TimeTr acker Adapter code with the autogenerated methods Eclipse created 
when you implemented the BaseAdapter methods. Using the TimeRecord data object, 
you should have completed the data methods getCount,and getltem (getltemld is 
done for you). You also should have created a collection to store these objects. 


public class TimeTrackerAdapter extends BaseAdapter { 

private /\^yLis-t<TimcRcdo\rd> -times =■ hCy/ /\v , vayLis*t<TimcRcdo\rd>0 ； 

public TimeTrackerAdapter() { 

} v, A fv-Wa*tc AvvayL*is*t oy>c 

TimcRcdovd (or eddii voy/ *tV>c Us*t\/*icy/. 

public int getCount() { 

■ -j^oturn -1; return timcs.siz.c0 ； 气 - thev-c is Ohc Ti^cRcdo\rd cadh 

^ the Si 2 ^ of the Lisll/icw is just the 
humbc\r T^tKtCoYds ih A^ayList 

public Object getltem(int index) { 

■ upturn null ； return gctlicmfmdc%); 

} V 

public long getltemld(int index) { 

return *mdc>c ； 

} 

public View getView(int index. View view, ViewGroup parent) { 

return null; 


TimeTrackerAdapter.java 



Ay 七 he oY\c-io-ov\c keeps 

casyl The da*ta Lv a v-o\w 
a 七七 he *mdc% is TimcRcdovd *m 
-tKc Avv-ayUis-t a*t sa^c *mdc%- 
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What about getVicw? 

The data methods are complete now, but what 
about get View? The get View is the link 
between the data stored in the Adapter and how 
it’s displayed in the ListView. In the get View 
implementation, you’ll retrieve the data for the row 
from the ArrayList, populate a view with that data 
and return the populated view. 


The *mdc% o( data *to public View getView ( 

display- This dovvcsfor>ds *to 、 - - 

iht mdetes rn the a^ay \\si int index, 


of TimcRcto\rds. 


View view, < - 


ViewGroup parent) 


The view "fco 
populate the 

ih. 


Hold on a second. 

What view is going to be 
used here? Don’t you have 
to customize one for time 
tracker data? 


O 


0 


You’ll need to create a custom view 

You’re storing custom data for you app in the 
Adapter. That’s why you had to subclass BaseAdapter 
and create your own implementation. Just like 
storing your custom data, you also need to create 
your own custom views to display your data. 
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r — — — — — — — — — — — — — — — — — — — 

,ADAPTER VIEW CONSTllllClION , 

Before you can wire up the View to the TimeRecord in getView, you need to design it! Here is a sketch of the 
I layout for one row in the ListView. | 

I The cirrtivc dell is a I 



The v/id 七 hs are all se 七 *fco PILL—PARENT so -they av-c as wide as possible- 
The heights av-c sc*t *bo lVR/\P__CONTEKT so 七 hey da 灼 resize based oy\ 




tWeiare ng o 

Dumb Questions 


How come all of the View height 
are set to wrap_content? 

First of all, if you set the height to 
filLparent, it will fill the whole list! That’s 
very bad! Likewise, setting the height to a 
fixed size would be a poor choice. The time 
is fixed in length to one line, but the notes 
could be several lines, but if you set the 
height of each View and the layout to wrap_ 
content, the cell will grow to fit the content 
and the row data will display correctly (and 
completely!). 


We’re making a new layout here, 
can you have more than one layout per 
screen? 

Definitely. Up to now, you’ve had 
exactly one layout for each Activity (which 
maps to a screen). It doesn’t have to be 
that way! You can have as many (or as few) 
layouts per screen as you like. 


That sounds kind of cool, when 
would I want to use a lot of layouts? 

Well, custom ListView rows are 
obviously one example but there are more. 
There is a really cool technique where you 
can use the 〈 include〉directive in one of 
your layouts. That takes another layout that 
you’re including and adds it inline making a 
big combined layout. It’s a really useful way 
to organize and encapsulate complicated 
layouts. We don’t have time to go over it 
in this book, but it’s definitely something 
worth checking out in the online Android 
documentation. 
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The steps to complete getView 

The getView method does some serious heavy 
lifting for the Adapter. It’s really the method that 
bridges the gap between the data and the display. Not 
surprisingly, there are a few basic tasks you’ll need to 
accomplish inside every getView implementation. 


Instantiate the View 

The first time getView is called on your Adapter, 
the View passed in is null. Since the Adapter 
knows how the data should be displayed, it’s up to 
the Adapter to instantiate the View the first time. 
Successive calls to getView return the same View 
back to be repopulated with new data. Repopulating 
the same View instead of creating new Views for 
every cell is a performance optimization often used in 
user interface frameworks. 


Retrieve the data 

The Adapter also contains the data. And the list 
index is passed into getView. You’ll need to 
correlate the index passed in to the ArrayList of 
TimeRecords. For this adapter, you have an 
correlated indices between the ListView and the 
TimeRecords in the ArrayList. 


Set values ow the view 

Using the selected TimeRe cord, and the View, set 
properties on the view to reflect the data. In this case, 
you’ll be setting text in the view to display the time 
and the notes from a TimeRe cord. 


Ih-Platc the 1/iew 



sclcc.*bcd 



Populate 七 V>c Vicv/ W\{\\ 
sclcdicd data 
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Create the new layout 

Now that you have a design for your view, it’s time 
to build it! Go to File ^ New — Android XML File 
to launch the new Android XML file wizard. 


TimcTvadkcv 
pvojcd*t 


Call layout 


Select Layout as 
the v-csouv-dc type 


TKc / v-cs/layou*t -foldcv- 
will au*to-pofula*tc ^cy\ 
you st\tti Layout as 七 he 
vcsouvtc *tyfc 


New Android XML File 


New Android XML File 

Creates a new Android XML file. 






Project 

TimeTracker 

1 __ 

, 


1 - 

Mie "5^ 

timejistjtem.xml 


What typ 

V 

>e of resource would you like to create? 

© Layout 0 Values ◦ Menu ◦ AppWidget Provider 

一 : Preference CJ Searchable :」 Animation 


> 


: 、 Browse.. 


What type of resource configuration would you like? 


Available Qualifiers 

Chosen Qualifiers 

说 Country Code 
(HTI Network Code 

Language 

4 Region 
■BlSize 

r> 


ai Ratio 

J Orientation 
总 Dock Mode 

3 Night Mode 

1^] Pixel Density 
■ Touch Screen 
蟲 Keyboard 
圆 Text Input 

A 


N^ivinAtinn Strife 

▼ 


/res/layout 


Fold^2 

Select the root element for the XML file: 
LinearLayout 


Cancel 


Finish 


Lmca\rLayoui v/ill de*faul 七 as 七 he 
\rocrt layout (oy 七 he new layoui )<ML 
•file. Keep 七 his selected i\v\Cc you’ll use 
Lmcav-Layoui -Pov- youv- dell layou-t 
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i^harpen your pencil 


Below is the time_list_item layout code generated by the New 
Android XML File Wizard. Modify the layout to match the design 
you created for the list cell. 


<LinearLayout 

xmlns : android= n http :// schemas.android.com/apk/res/android" 
android:layout—width="fill 一 parent" 
android:layout_height= M fill_parent" > 

</LinearLayout> 



timejistjtem.xml 
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Below is the time_list_item layout code generated by the New 
Android XML File Wizard. You should have modified the layout to 
match the design you created for the list cell. 


<LinearLayout 

xmlns : android= M http :// schemas.android.com/apk/res/android" 
android : layout 一 width="fill—parent" 

android : layout—height = ，， f ill jpnrcnt n ― “wrap—dorrterrt” 心七七 ^ height •to 

_ )> ~ I d) _ so 

c/LinrarLayout> aha\roid ： o\ricr\*ba*cioh=- vertical > ^ 从 ^’ 七 《 fi|| u p 

Make sure ty > list 


layout is \/c\rt^al. 




<U\Aew andv*oid : id 二 ” 侈 +id/ y\t^ 


The -Piv-s-t Tdiew vf 
-fov- time. |七 has 
ar\ IP -for ^utss la-tcv- 


ahdvoid : laYou*t_wid 七 idilLpaverrt” ? Make *bv^c y/id*tV> as W\dt 

V as possible bu*t s'iz^ {\\t 

ahdhroid : laYou*t_hei# 七二 ” w\rap_dorrteh*t” J *to *tV^ tor\*tc\r\*t 

ahdvoid:*twtSiz*c =1 ”l 0dp” ^akc the text Bl^l 

andvoidhpaddir^Bottoi^ 111 ” 弓 dp” /> 

Add some padd'mj botW so is 


some 


bcWcy\ *tiic time ar\d *bViC Y\o{,tS. 


_ <7cx.*t\/ic>w andvoidhid:” 齒 +idA\o*tes view” 

y) 一 

The seded Textl/iew a‘id%c>ut_W 妞二 ％ 11 一 _# 1 ihe widih as wide 

•”. ,.,, 丄 L • L 丄，， ，丄丄 ” \ as P°^'blc but S.Z4! the 

aharoidHayout^cight- wr 外一 doh 七⑶七 ) height io the (,o^t 


•-P -Po\r the hotes. 

3 lso h 3 s ID *foV" 

3 故 ss latc\r -Pv-om 

-Pi^dl/icwByld- 


li 


a^dv'oid ： *tc%*tSiz^= = - w l Zdp” /> 

Make *tV^c small- 


</L'mcarLayou*t> 气 —- *tKc layout 





time list item.xml 
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Topic Title Magnets 

^ Now that you’ve completed the View, you have everything you need to write 
the getview method. First you'll need to check and make sure the View 

_ is not null, and if it is null, you'll need to inflate it. Then you'll retrieve the 

selected TimeRecord. Once you’ve retrieved it, you need to populate the 
view with the information from that TimeRecord. Complete the getview 
method using the magnets below. 


public View getview(int index. View view, ViewGroup parent) { 


return view; 


rouV" 


a^cb. 


if (view == null) { 



Layoutlnflater inflater = 

Layoutlnflater.from(parent•getContext ())； 


TimeRecord time = times•get(index) 


timeTextView.setText(time.getTime()) 


notesTextView.setText(time.getNotes ())； 


TextView notesTextView = (TextView) 

view.findViewByld(R•id•notes 一 view) 


view = inflater.inflate( 

R.layout•time—list—item, parent, false) 


TextView timeTextView = (TextView) 

view.findViewByld(R•id•time_view) 
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connecting the adapter 



Topic Title Magnets Solution 

With the View completed, you had everything you needed to write 
the getview method. First you should have checked that the 
View is not null, and if it is null, you should have inflated it. Then you 
should have retrieved the selected TimeRecord. Once retrieved, 
you should have populated the view with the information from that 
TimeRecord, completing the code with the magnets. 


public View getview(int index. View view, ViewGroup parent) { 


if (view 




null) 


□ 


Layoutlnflater inflater 

Layoutlnflater.from(parent.getContext ())； 
view = inflater.inflate( 

R.layout•time 一 1ist—item, parent, false); 


Chcdk \( V\t^J is 
I-P *rt is, vc*tv*icvc 
*tV>c layout m-flaicv- a^d 

VII 


view- 



The TimcRcdovd *m *tV>c Avv*ayL*is*t 
a 七七 he *mdc% has you 

*to fofulaic *tV>c vicv/. 


TextView timeTextView = (TextView) 

view.findViewByld(R.id.time 一 view); 

timeTextView.setText(time.getTime()); 


Po\r the iirwc, jet a io the 

七 TeWView av\d sci 七 he -fco 七 he 

七 -Pv-orw ihc TirwcRcdoV-d- 


TextView notesTextView = (TextView) 

view.findViewByld(R.id.notes 一 view) 


Po {\\t same fvodcss *fov 

a *to *thc r\oits 

a 竹 d se*t b> 

y>o*tcs S*brnr^ m TimcRcdovd- 


return view, 


292 


Chapter 7 
























lists and adapters 


Connect the adapter to the ListView 

The Adapter is finished now，and the next step is to use 
the Adapter in the ListView. To set the Adapter on the 
ListView, you’ll get a reference to the ListView using 
findViewByld and call the set Adapter method passing in 
an instantiated TimeTr acker Adapter. 

Start by adding an android:id to the ListView in the layout. 



<ListView 

xmlns : android= 〃 http://schemas.android.com/apk/res/android” 
android : layout-width=’’f ill_parent” 
android : layout-height=”fill—parent” 

一 fy\lt 

android: id="@+id/times 一 list "<~ - 一 心七 

/> 


main.xml 

Now get a reference to the ListView in onCreate, 
instantiate the TimeTr acker Adapter and configure the 
ListView to use it. 



public class TimeTracker extends Activity { 

TimeTrackerAdapter timeTrackerAdapter; 

public void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.main); 

3 *to 

ListView listView = (ListView) *thc UsWicw. 

七 he 

adaptev- findViewByld (R. id. times 一 list) ; 

_^ timeTrackerAdapter = new TimeTrackerAdapter (); 

listView. setAdapter (timeTrackerAdapter); 

Co^-f i^uvc LisWiom 

-to use 七 he adaaftev-. 



tUss Foo { I 

pblit … ■ 

O 

TimeTracker.java 
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testing it out 


Add test code to the adapter 

You custom Adapter implementation is now complete and 
being used in the ListView. There’s just one problem, the 
Adapter still doesn’t have any data in it. 

You’ve built the TimeRecords data object to hold times 
entered, and built the Adapter around an ArrayList of 
TimeRecords. So even if you 



Circatc a -Pew pircpopulatcd 

see 

the L-lS"t\/icy/. 


public TimeTrackerAdapter() { 

times.add(new TimeRecord( 

''38:23' ''Feeling good!">> ; 
times.add(new TimeRecord( 

''49:01’’ ， ''Tired. Needed more caffeine ’’））； 
times.add(new TimeRecord( 

''26:21", ''I'm rocking it!")>; 
times.add(new TimeRecord( ^ 

''29:42", ''Lost some time on the hills, but pretty good.")); 






w 


Add this test code 
to the constuctor of 

TimeTrackerAdapter. 


TimeTrackerAdapter.java 
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Tesr DriVq 


Now that the TimeTrackerAdapter is complete, connected to 
ListView and populated with test data, run the app again and 
make sure it all worked! 


The Lis*t\/ic>w 

has da*ta| 
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user review 


Vov\m J s checking in... 

Donna’s really looking forward to using the app. 
So she stopped by to see how you’re doing. 


It*s looking great so 
far. but I am going to 
be able to enter my own 
times, right? 


Q 


Next up，user entered times 

In this chapter, you created the new 
project, added a list,build your own 
adapter, custom views, and connected it 
all together. And great work! 

In the next chapter, you’ll be adding a 
second screen to this app, so your users 
can enter their own times. 




See you back shortly to add 
user entered times. 
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off piste - 

With all of this work wrapped on Adapter, you’re ready to move on with this app. If 
you’re still wanting to learn more about Adapter and their Views, here are a couple of 
places to look. 


Prebuil 七 Lis 七 \/icv/s 

you built 七 his list item view 
sdvd 七 A, sometimes you use pvcbuil 七 
viev/s. Take a look ai 七 k do 灼 stasis m 
a^dv-oid R Uyout -fov mov-c iy\-fov-ma*tioy \： 

： / / dcvclopcr.ay\dv-oid.6om/rc-fcv-cr\6c/ 

ar\dv-oid/Rlayou-tli*tm|. 





Take a look at these built i h Adapters ^ 
youv apps. 


^ 十吖巧 ’: Adapter with ⑽ y 七 hi 叫 

’― ⑽士 d ‘ you , 〆 pass ih 如 / 

^ SimpIcAdap ^： Adapter that us« data 

^red m X 亂 v-csou^cs build the list 

參 C^Adayiev ： A，adapts that uses 

! '° h 如⑹ ih a s 队心 database 

(you I Ica^rh moire about these ih a 4w 
^naptcirs) 
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Your Android Toolbox 

Now that you created an 
Adapter and list item View 
from scratch, you’ll be able to 
add lists to all your apps. 


Usiv\^ L*ist\/tC>ws 

參 Adaftcv by subdlassm^ 

Y ou，r ovm ， oV " uSm 9 a 

fvcbuil*t Ada^tcv-. 

场 Create lis-t i*tem \!\v*i or use a built 
•m \/ic>w- 

參 Pofula-tc *tV>c adaftev W\i\> data. 

參 Co^i^urc i\\t list -to use you\r adaftev. 


BULLET POINTS - 

■ When working on a multi-screened app, 
always start with your post important use 
case. (Talk to your users to find out what 
they are!) 

■ Use Listviewto display information in a 
vertically oriented list (with built in scrolling!). 

■ Fill your lists with data using Adapters. 

■ Start your custom Adapters 
implementations using BaseAdapters. 

■ Use Eclipse’s built in “Override/Implement 
Methods” option to add method stubs 

to your class for any interface your 
implementing (or abstract class you’re 
extending). 

■ If you build an Adapters that stores 
data, build your own data object to keep 
your data organized 

■ Add new layouts to your apps using the 
Android New XML File Wizard 

■ Inflate layout XML descriptions 
into instantiated views using 

LayoutInflater• 
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8 multi-screen apps 



Eventually, you’ll need to build apps with more than one screen. 

So far, all of the apps you’ve built have only one single screen. But the great apps you’re 
going to build may need more than that. In this chapter, you’ll learn how to build an app with 
a couple screens, and you’ll create a new Activity and layout, which the Wizard previously 
did for you. You’ll learn how to navigate between screens and even pass data between 
them. You’ll also learn how to make your own Android context men- the menu that pops up 
when press the Menu button! 


this is a new chapter 
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the need for user entry 


P(mwa wawts to cwtcr her times 


Donna thinks the app is looking great, and 
she’s really looking forward to using it. But 
right now she can’t enter her own times. 



Let’s get right on it! 



The only thing stopping Donna 
from using her perfect new time 
tracking app is that she can’t enter 
her own times yet. Let’s build 
that now so she can get started 
tracking her times for her big race! 
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How is she going to add her oww times? 

The list is displaying times, and you need to make 
a way to add times with notes inside the app. You 
could combine it all into one screen and have an 
entry section at the bottom, but that would get 
cluttered very quickly. 

The best way to do this is to add another screen 
specially designed for entering data. Here’s a 
quick sketch of what the new screen will look like. 



Field labels. 


_RQfl 11:50 am I 

Time 




Koics 


] ^ - 


\ Savc^J j^Ccihdg^ 



This is an editable 七 ext 
3v-ca 七 he usev- will 
伙七 e\r 七 hei\r 七 irwe. 


TK'is is 扣 o*thcv* cd*i*tablc 
-toci av~ea usev 

w'lll -fvee *fovm y>o*tcs 

abou 七 tiw'C- 


^[y\ obvious ad*tior\ lou*btor\ 

•to save newly entered 
m-fov-w>a*tior\ take 

usev-s batk -to i\\t list view). 


Its always a good idea -to 

9 ,vc y 。 价 usevs ay\ obvious 

way -to gc-t out o-f the ad：ioh 
they lh . 
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planning the user entry implementation 


Adding the entry scrccw 

There are a few steps you’ll need to take to make the new entry 
screen and connect it to the list screen. Here is what you’ll be 
doing in this chapter. 



Z. Launch the entry screen from the list 

The list screen is the main screen for this app and this is the 
screen that displays when you launch the app. You’ll add 
an menu with an 'Add 5 menu item to this screen that will 
launch the entry screen. 


TimeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine. 
26:21 

I totally rockc^it \ f r 

29;4 ^ \' I d 


Lost some time 


retty 



Usc\rs lau^h a 

■fv-orw "the mam "time 
lis-t 



302 


Chapter 8 




































multi-screen apps 


$. Return to the list screen from the entry screen 

Whether the user enters a new time or cancels out of the entry 
screen, they need to return the list screen when they are done. After 
writing the code to navigate to the entry screen, you’ll write the code 
to return back to the list screen with the user entered data. 



TV^c user 

m^o\rw>3*tioir\ 3ir\d 


presses Save- 



4. display the new time w the list 

This is where it all comes together! After 
building the navigation back and forth from 
the entry screen, you’ll implement logic to 
store the newly entered time and display it 
in the list. 


Tlic hcwly chtcv-cd 
"time m-Povrha'tioh yts 
added -to the list. 





I totally rocked it! 

29:42 

Lost some time on the hills. But pretty good. 

MiCe dlcdn vutv Alakc suve ⑽七 "to slow dovm in *tKc 
second Kal-f- 
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creating a new layout 


Create the new layout xml file 

Launch the New Android XML File wizard and create 
a new layout. Call the new layout add—time • xml. 

Here is the plan for the layout. You’ll create one vertical 
Li near Lay out for the screen. This will have “Time” 
label, the text entry field to enter the time, followed by the 
“Notes” label and the notes entry field. At the bottom of 
the screen, you’ll have a horizontal Li neat Layout with 
the save and cancel buttons centered. 
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multi-screen apps 


Use EditText for text cwtry 

This is the first time you’re adding a text entry 
component to one of your screens. All of the 
other Views you’ve added to your screens have 
been read only. But now you’re having users enter 
information, so they need an entry View. 

There is a special text entry View called EditText 
that you can use. It works just like a TextView, 
only it’s editable. From a layout perspective, just 
remember to give the EditText an ID so you can 
retrieve the View and it’s contents later on. 


Roo 七 L-ir\C3V"L-3You"t 

labels dy\d -f ields. 




<EditText android : id= 〃 @+id/your—id” 

android : layout 一 width= 〃 fill—parent" 
android : layout_height= ,/ wrap_content 
/> 


rr 



Vo\A apply 1 /icw 
layout ativibutes 
"to Bv\ EditTcx-t just 
like o-thc\r \/icws. 



The New Android XML File wizard is pretty cumbersome. 
Do I have to use it to make new layout XML files? 

No. The wizard is just creating the XML file and adding it to 
correct directory based on the XML type. It also tries to add a little 
structure based on your XML file type like adding the root element 
of a LinearLayout if your making a layout file that you’ve declared 
in the wizard to be a LinearLayout. 


After all that time customizing layouts for different 
screens in the NASA app, how come we’re only adding one 
layout for this screen? 

Just like the NASA app, you would want to test this app on 
multiple devices of various screen sizes and customize the layouts 
as necessary for your supported device. 
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building the layout 



ExegciSe 


Below are magnets with the XML layout declarations for the views in your layout. Arrange 
the magnets to complete the layout XML There is one main layout and one sublayout for the 
button bar similar to the one you made for the NASA Daily Image app. 


〈EditText android:id="@+id/notes_view" 

android: layout—widths ， 'fill—parent" 
android: layout—height=’’wrap—content" 
android:gravity=”top” 
android: layout_weight= ,/ l // 
android: layout—marginBottom=’’10dp" /> 

<LinearLayout 

android: orientation= /, horizontal^ 
android:layout—width^'fill parent" 
android:layout—height="wrap—content" 
android: layout_weight= ,/ 0 // 
android:backgrounds^#FF8D8D8D" 
android:gravity="center horizontal" > 


'extView android: text="Notes" 

android:layout 一 width="wrap— content” 

android: layout— height = "紅 ap—content" /> 


<TextView android:text 

="Time" 

I 

android:layout 

width= / 

’wrap content" 

android:layout 

height: 

="wrap content" 

android:layout 

marginTop=’’lOdp" /> 
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<Button android:text= 〃 Save 〃 

android : onClick=”onSave 〃 

android : layout_width= 〃 wrap—content 〃 

android: layout height =,, wrap content - 


/> 


<EditText android : id=”@+id/time—view” 

android : layout_width=”fill—parent” 
android : layout_height=”wrap—content” 
android:layout marginBottom= 〃 10dp 〃 / > 


〈Button android:text="Cancel" 

android:onClick="onCancel" 
android, i layout width="wrap — content 
android. : layout height = ’’wrap—content 


/> 


</LinearLayout> 





</LinearLayout> 


<LinearLayout 

xmlns : android= 〃 http://schemas.android.com/apk/res/android/ 
android:layout—width=”fill—parent” 
android:layout—height=”fill—parent” 
android: orient a tion= ,, vertical ,, > 
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building the layout 



t°^S ExeRciSe 

^§OLyt # lOH 


Below are magnets with the XML layout declarations for the views in your layout. You 
should have arrange the magnets to complete the layout XML There is one main layout and 
one sublayout for the button bar similar to the one you made for the NASA Daily Image app. 




TV^is is i\\c layout rooi, a vc\rt*idally 
or\tv\itd L'mcav-Layou-t -fov- 


<LinearLayout 

xmlns : android 二 ’’http ://schemas . android. com/apk/res /android' 
android : layout width =,, f ill parent" 
android:layout_height= 〃 fill—parent 〃 
android : orientation= 〃 vertical ’’〉 


Tiic tiw'C 
label. 


<TextView android:text 二 "Time" 

android : layout—width=’’wrap content" 
android:layout_height="wrap—content 1 
android : layout_marginTop= ,, 10dp ,/ /> 


<EditText android : id= 〃 @+id/time_view 〃 

android : layout_width=”fill_parent” 
android : layout—height= 〃 wrap 一 content” 
android:layout marginBottom= 〃 10dp 〃 / > 




The ho*tc 

label. 


s 


、 

Notice *»*t V^as an IP 

-for latcv- \rc*tv-icval. 


<TextView android:text 二 "Notes" 

android:layout_width="wrap—content" 
android: layout_height=’’wrap—content 1 
android: layout_marginLeft= ,, 10dp /, /> 

<EditText android: id= ,, @+id/notes_view > 

android: layout_width= ,, fill_parent /, 
android : layout_height =,, wrap content 
android : gravity= /, top ,/ 
android: layout_weight= ,, l /, 
android:layout—marginBottom="10dp" /> 


The r\o*tcs 

EdvtTe 此 Notice 
•rt dlso IP- 
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TV^C \Y\Y\tr I'mcav- layout -fov- i\\t Wtto 於 
bar. It 必 a yr^ batkyound t^c 
jvavrty is set bo U^itrJ\or\zx>^ia\ so 
i\^t Wtfems will be 

xK <LinearLayout 

android: orientation= ,, horizontal /, 
android: layout_width= ,, fill_parent /, 
android:layout_height="wrap—content" 
android: layout_weight= ,, 0 ,/ 
android : background="#FF 8 D 8 D 8 D" 
android:gravity="center—horizontal" > 


TV save ahd 
but-fcohs whi^h 
both have OhCli 匕 k 
p 浐 opeirtics dc-fihcd. 
T*he i^ctKods will be 

i^plcmch-tcd latcv. 



<Button android:text= 〃 Save 〃 

android:onClick= 〃 onSave” 

android : layout—width 二 〃 wrap_content 〃 

android:layout—height= 〃 wrap_content 〃 / > 

〈Button android:text="Cancel" 

android:onClick="onCancel" 

android .i layout width—wra.p — content 

android: layout height 二 ’’wrap—content /〉 


</LinearLayout> 



Bv\d o( -biic button 
bar layout. 


</LinearLayout> 


- Ed of the s 仆 ceh . 


you are here ► 


309 















creating a new activity 


Create a second Activity 

Now that you have the layout built for the entry screen, you 
need to display it in the app. So far, you’ve displayed a layout 
when an Activity is created, you’ve created optimized layouts 
that dynamically display for different screen sizes, and displayed 
layouts as part of a fragment. 

But now you’re making an entirely new screen with new 
behavior. What you need now is another Activity. Start 
creating a new Activity by adding a Java class called 
AddTimeActivity to your project that extends Activity. 


suv~c "{jo 

f Adiviiy. 

public class AddTimeActivity extends Activity { 



AddTimeActivity.java 



- Dumb Questions - 

I already have an Activity. Do I really need another one? 

In this case, yes. You could have displayed the new layout in 
the TimeTracker Activity, but that Activity has functionality specific to 
the list screen, like finding the list view in the layout and setting the 
adapter. If you just tried to display the entry layout in the TimeTracker 
Activity, the Activity would break when trying to find the list. 

When would be a good example of when I would have 
multiple layouts in one Activity? 

The layout optimizations you did in chapters 5 and 6 for 
different devices consisted of creating multiple layouts for one Activity. 
The key is that the functionality and behavior were the same. In the 
NASA app, once you had different behavior for the NasaEdNews, you 
had a second Activity. Just remember, same behavior, same Activity. 
Different behavior, different Activity. 



Create a new class called 

AddTaskActivity in your project. 
Make sure it extends Activity. 
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Below is the code for the AddTimeActivity class you just created. Complete the code 
below to display the screen. You'll need to override onCreate and set the content view to 
your new layout. 


public class AddTimeActivity extends Activity { 


0^\ndt ohCv-catc 一 . h 
七 ha 七 wthod ， v/V"i-tc the 
fodc "to display the layout 
•Pov* the add task 


AddTimeActivity.java 
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setting the layout 



Below is the code for the AddTimeActivity class you just created. You should have 
complete the code below to display the screen. You should have overrided onCreate and set 
the content view to your new layout. 



public class AddTimeActivity extends Activity { 


public void ohCvea*te(Buhdle saved{ 

povvt su p er . oy ^wte(saved|r\star^eS*ta*te); 

to tall sf 

se*tCorrterrt\/iew(R.laYou*t.add 一 


} 


V 


Call sc*tCoir>*tc^*t\/»c>w 
y/rbh 七 he R doir>s*t3^*t 
-fov- *tKc layout you jus 七 
y/v-o*tc *fco sc*t *thc strttY\- 



AddTimeActivity.java 



Don’t forget to call super.onCreate() 

The Activity base class has logic needed to 
properly instantiate and configure an Activity 
for use by the Operating System. If you 
override one of the lifecycle methods, be 
sure to call super. If you don’t you’ll get a nasty runtime 
exception and your activity won’t run! 


Watch it! 
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There’s work left to do, but you’re 
getting there! 

So far, you’ve built the layout for the new ttime 
entry screen and the Activity to control the 
screen’s behavior. 


Now it’s time to navigate to the new entry 
screen from the list. 




Think about different Android apps you’ve 
used and how you navigate around them. 
How would you build the navigation to 
the Add Time screen in this app? Write 
your answer below. 
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navigating with options menus 


Use m Option Menu 

With the layout built and a new Activity created for the 
Time Entry screen, it’s time to navigate to it. There are a few 
different ways you could implement the navigation including 
putting a button on the screen or using an options menu. 


The options menu is the popup that displays when you press 
the Menu button on an Android device (or the on screen 
menu button on a tablet). The options in the menu are 
controlled by the Activity in focus when the menu button is 
pressed. 

Let’s add an options menu item to launch 
the time entry screen. 


Options menu Mdden 



丁 he list sd\rccK> 

the is opCh— 
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Options menu showing 


_3G Hi a 7:03 

TimeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine. 

26:21 

I totally rocked it! 

29:42 

Lost some time on the hills. But pretty good. 



\ Add 

1 ^ 




...bu 七 七 he menu bu*bto” is fv*csscd> 

v/'ill siioy/ >w*rth ov\t button 
V/ill Add sdVCCir>- 
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Create the menu XML file 

Menus are defined in XML just like layouts 
and many other Android resources. Just like 
layouts, you can create new menu XML files 
using the New Android XML File wizard. 
Only this time instead of selecting layout 
options, select menu options. 


r\ 


£clcd*t 

TimcTvadkcv- 
fvojcdt 


Mew Android XML File 


New Android XML File 

Creates a new Android XML file. 




Cdll mCiaU 

time l'is*t 


Project TimeTracker 
File time_list_menu.xmI 


What type of resource would you like to create? 

0 LJV aut 0 Values 

0 Preference ◦ Searchable 

What type of resource configuration would you like? 



Sclcd*t Alc^u as *bKc 

vcsouvtc *typc- 




： v Browse. 


Q AppWidget Provider 


Arimation 


Select the root element for the XML file. 


The / v*cs/mcruA -foldcv- 
Will au*to - populate 

you sclcd*t Me ⑽ * — /res/m€nu 
as *thc vcsouvdc -type 


Mem will be selected 

,h "the dv-opdowh. 

The dvopdowh iwill 
be disabled sih^c 

is the Ohly 

r ible voo-t clcmchi 
a menu v-csouvdc. 


Available Qualifiers 



Chosen Qualifiers 

兑 Country Code 
(SD Network Code 

G 



J§ Language 




^ Region 

Ei^ize 


L->) 


□i Ratio 
,-P Orientation 

T 

C < iJ 




C\\CV 
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adding menu options 


Add a mm option 

The menu you just created with the wizard 
will be in your project under the res /menu 
directory. Navigate to that directory in the 
Eclipse Package Explorer open it. 


Just like the graphical layout editor, there is a 
graphical editor for creating menus. Start by 
clicking add to add a new menu item. 




Pvcss 0 ^ 


Now you can configure the new menu item 
by setting the title and ID. 




IQ) timejist.menu.xml ^ 

w Android Menu 

Menu Elements 

(T|add_ .time_menujtem (Item) 


(T| [g] Az Attributes for add_time_menu_item (Item) 

[I ] Base attributes that are available to all Item 
objects. 


Add.. 


Remove.. 


Down 


Id 

Menu category 
Order in category 
Title 

Title condensed 
Icon 

Alphabetic shortcut 

Numeric shortcut 

Checkable 

Checked 

Visible 

Enabled 


@4-id/add_time_m4 





I 



Add 


Browse … 



Browse •“ 




Browse... I 



Browse... 



ihc lt> io 私 id/ 

add—"time mChu 1 七 € 你 . 



the i-tem 
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Show the menu 

Just like XML layouts, the menu is defined in 
XML, but you need to display it from your Activity. 
The Activity base class includes a method called 
onCreateOptionsMenu that is called on the 
displayed Activity when the menu button is pressed. 
The default implementation does nothing, but you can 
override it and display your custom menu. 




Fiv-si tall supcv-. 


public void onCreateOptionsMenu(Menu m) 

super.onCreateOptionsMenu(m) 

Menulnflater menulnflater = getMenuInflater(); 
menulnflater.inflate( 

R.menu.time list menu, menu ); 


Call A^vitics mC*tV>od, 

V*C*tv*lCVC 


V livPlate 七 he you dc-f mcd \v\ 

*tirwe 」 is 七一 mem* \v\ -the R -file 

(or 七 “e desdvip 七 io 灼 . 


Notice that onCreateOptionsMenu uses an 
Inflater, just like when you inflated the list item layout 
in the list adapter. The Menulnf later takes a 
menu defined in XML and creates men items. The 
only difference is that a default menu is passed in to 
onCreateOptionsMenu and the menu items defined 
in the XML file are added to that menu.. 


The Mchul^-Platcv-. 

B—ft b 



TimeTracker.java 


The mchu populated 
With youv- dus-tom 
items 
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processing the menu action 



Tost DriVq 


Run the app, and press the menu button when the time list 
appears on screen. You should see the menu display with 
one single item “Add”. 


■ 


5554:standard 


as ml f 12:51 


TimeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine. 

26:21 

I totally rocked it! 

29:42 

Lost some time on the hills. But pretty good. 
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raw 


Press 七 he 
bu-t-fco^ 


y/'ill display. 
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Capture the menu action 

There is a companion method to 
onCreateOptionsMenu method called 
onMenuI temSelected which is called 
when a menu item is selected by the user. 

To make the menu item work, override 
onMenuI temSelected，check which menu 
item was selected and invoke your action. 


Ovcv"\r'idic 

OK\/V1cir\u|*tcw'Sclct*tcd 



public boolean OIlMenuItemSelected (int featureld, Menultem 


if 




(item. id == R. id. add—time 一 menu—ite 

Pv-odcss -the add -time ^ 

adtioir^ \ y \ ^ 





item) { 


This 七 hod will be 

called -fov cvcv-y 
item you add- l^s a 
Jood habi-t "to test 
whidh ’rtcrw v/ds selected 
by dorif»pa\r*mg i*t -feo 七 he 
id you assi^ed- 



You can add your code to process the menu item TimeTracker.java 

inside the if block testing for your menu item. 

Now you have two independent Activities, and 
a menu item with an action that can move from 
one to the other. 


Now turn the page to see how to launch new screens 
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starting new screens with intents 


Use Intents to launch new screens 

You can launch new screen using an abstract object 
representation of an action called an Intent. You can 
create an Intent when the Add menu item is selected 
pointing to the AddTime Activity. 


x Hll fi 7:03 


TimeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine. 

26:21 

I totally rocked it! 

29:42 

Lost somo time on the hills. But pretty good. 


M ( 


國 



The 的七 vc-Pcvc^dc 

the AddTime Activity. 



AddTime 


Sclcdtmj add me 灼 u 

itcrw dveates av\ Ihte 灼七 


Then you can call a utility method on the current 
Activity called start Activity passing the Intent. 
This starts a new Activity in your app, managing all of 
the lifecycle methods for you including stopping the old 


s ml fi 7:04 





TimeTracker 




Activity as well as creating and startng the new Activity. 


The mtejrrt 

"the Activity 





stairtA^tivi-tyO 

J 
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Launcking a new Activity Magnets 

Below is the empty onMenuItemSelected method in the 
TimeTracker Activity. Complete the method by creating and 
invoking an 工 ntent to launch the AddTime Activity Even though 
you only have one menu item right now, check and make sure that 
the ID of the menu item passed in to onMenuItemSelected is the 
add action. Pass the onMenuItemSelected call to super if you 
don’t process the action. 


public boolean onMenuItemSelected(int featureld, Menultem item) { 



TimeTracker.java 


Intent intent = new Intent(this , AddTimeActivity.class) 


return true 


if (item.getltemld() == R• id• add 一 time 一 menu—item) 


startActivity(intent) 


return super.onOptionsIteinSelected.(item) 
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finishing the new activity 




Launcking a new Activity Magnets Solution 

Below is the onMenuItemSelected method in the TimeTracker Activity. 

You should have completed the method by creating and invoking an 工 ntent to 
launch the AddTime Activity Even though you only have one menu item right 
now, you should have checked and made sure that the ID of the menu item passed 
in to onMenuItemSelected is the add action. You should have also passed the 
onMenuItemSelected call to super if you don’t process the action. 


public boolean onMenuItemSelected(int featureld, Menultem item) 

CKctk •七加 IP *to see i-f 
add at*tior> was selected 



Rc*tuv*r> *tv*uc 
*to *mdida*tc 七 he 



Intent intent = new Intent(this, AddTimeActivity.class) 


startActivity(intent) 



return true 


Create hCW ih-tcht h> 
select 

ahd -thch s-bv-t it 


return super.onOptionsItemSelected(item); 

V Pass *thc dall oy\ *to sufev 
-po\r i*tcrws •that 

may be m 


TimeTracker.java 
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Open AndroidManifest-xml 

Every Activity you use in your app has to be declared in 
your AndroidManif est. xml file. When you created 
your app with the wizard, it created the Activity for you 
and added an Activity element in the Android Manifest file. 

Before you test the app, add the new Activity declaration to 
your manifest file or you’ll get a nasty exception! 


〈manifest xmlns : android= 〃 http://schemas.android.com/apk/res/android" 

package =,, com. headfirst labs . time tracker^ ^ — -fov* 

you\r dpplidd'tioh 

android : versionCode= 〃 l 〃 
android:versionName= 〃 l•0"> 

〈application android : icon= 〃 @drawable/icon” android:label =,, @string/app_name〃> 

The ^dro\d^a^ -to -the dass, by 

Pddkd<\e *to ar>dv*oid : ^ai^C- So m *tKis dasc> .TimcT\radkc\r 丁 l I L I / 

bedor.es 七從 kcr.TwTVad ^， / he label is the that displays 

Uhdcir the i^oh Oh -the home sd^cch 


〈activity android : name="•TimeTracker - 


TWis toh-f'ijuv-cs 

i\\t 

\jo be Idun^ed 
-pV-OW> *tV)C ilOW'C 
screen. 




<intent-filter> 

<action android : name= 〃 android•intent.action.MAIN〃/> 
〈category android : name= 〃 android•intent.category.LAUNCHER ’’/〉 
</intent-filter> 

</activity> 

</application 〉 


The package is appended *to the so you 

广 j us 七 *to cr>*tcv* "the dbss irtdme heve whidh will ^ivc you 

f 仏 e ( u "y ^ali-ficd dass -Po\r -the AddTir^cActivity. 


<ad*tivi*ty a^dv-oid^arwc— ,, .AddTimc/\d*tivi*ty w > </ad*tivi*ty 

TKc adtiv'i-ty dedava 七 10 灼 


(or the AddTWM 七 ^ 七 '/. 


〈 /manifest 〉 



AndroidManifestxml 
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understanding the back stack 



Tesr DriVq 


You’ve got the new screen built, the Intent starting the new 
Activity from the menu and the new Activity configured in 
the Manifest. Go ahead and run the app and test out all 
your hard work! 


_ 圆 《 8 : 2 0 


TimeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine! 
26:21 



锚 8:17pm _ 


TimeTracker 



Clitk *m fields 
ay\d youll sec 
oy\ scrttv\ keyboavd 
auWat^ally f 啊 . 
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Perfect! Tke new screen looks great! 
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Bac| 說 a 逢 Up Cl^se 


As you test the app, you’ll pretty quickly realize that the save 
and cancel buttons don’t work. But even without implementing 
these buttons you’re not stranded on the new screen. Press the 
back button and you’ll go back to the list screen automatically. 



55S4:standard 



pv-css i\\t batk buthm 
dr\di you II 50 batk *to 
i\\t list st\rccir\. 


Wait, how did that work? 

Android maintains a stack of Activities your app has started, 
beginning with the first Activity in your app. As you start 
new Activites like you did with the time entry screen, it’s 
automatically added to the back stack of Activities. And when 
you press the back button, it automatically goes back to the 
previous Activity in the stack which in this case is the list screen. 
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planning the button actions 


Implement the buttow actions 


The back stack and the back button do allow 
one way to navigate back to the list screen from 
the time entry screen, but it’s not the behavior 
you’re looking for. You have the Save and 
Cancel buttons on screen, and you need to 
make them work. 


Let’s start with the Cancel button. It layout 
declaration for the button specifies an onClick 
method called onCancel. You could follow the 
same pattern you used to launch the time entry 
screen and create a new Intent pointing to the 
TimeTracker Activity and starting that Intent. 


The C^y\Ct\ button’s o^Clidk 
pav-arwetev is ^oh-Pijuircd *to 

ddll a method called o^Ca^d- 



<Button android:text= 〃 Cancel 〃 


android : onClick=〃onCancel 



android : layout_width= 〃 wrap_content 〃 
android:layout height=〃wrap content" / > 




public void onCancel(View view) 


Irrteh 七二 hew Irrteh 七 ( 七 his, TirwcTradkcv dlass )； 

Cv-ca*tc By\ 

*to t the 

\ S-tav-t TimcT\ra^kc\r Mtivi'ty- 

Activity. 





add time.xml 




AddTime.java 
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Put there's a problem 


Every time you start an Activity, Android 
automatically adds it to the back stack. If you 
always start Activities to navigate between 
different screens, you’re going to end up having 
a huge back stack! 




When the app 
starts, the 
screen stack 
only contains 
the TimeTracker 


Activity. 


Time 

Tracker 



When a user presses the 
Add item, the AddTime 
Activity is started, adding 
it to the screen stack. 



Cancel starting another 
instance of the 
TimeTracker Activity 
adds it to the screen 
stack a second time. 




Time 

Tracker 


AddTime 

Activity 


Thcv-c avc iv/o 
TimcTvadkcv 

七 he s*tadk| 


Take control of the back stack 

There are a few different ways to control the 
back stack. One technique you can use is to call 
finish on the current Activity to end it. This will 
remove it from the back stack and automatically 
navigate to the previous screen in the stack. 


Call -f misK OY\ 七 



> finish() 



AddTime is -f misKcd 
<^f-f s*tadk. 

TimcTvadkcv- is du-toma-tiddlly 
displayed and p\rcss*mg ba^k button 
•fv-orw hcv-c will e 乂 ’rt 七 he app. 
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implementing cancel 


Implement cancel using finish 

If you implement onCancel using finish, you’ll 
remove the intent and the start Activity 
call and replace it with a call to finish. This will 
stop the AddTime Activity, remove it from the 
stack and return the user to the list screen. 



public void onCancel(View view) { 

"^itcnt intent ^ new 工 ntentt"bfei 
nt HTtAr'i-i Trii~Y (i ) - 

-fihishO ； 


Call m 

base dlass. 


,Tn - r- 1 ^ qq ); 

Doh t si3\ri ahothcv* 

TWTV 沘 k 饮 Activity. 




AddTime.java 


What about the save button? 


This implementation will work for the Cancel 
button, but what about the Save button? The 
Cancel button just needs to return to the list 
view, but the Save button needs to return to the 
list view and return the user entered data. 





Call -f'misK OY\ *tV>c 
AddTurwcA^tivi-by. 

Save ■ 



result data 



Time 

Tracker 


TKc usev trA,crtA daia vc*tuvir>cd 
*to time *t\r 3 dkcv*. 


AddTime is -f misKcd 
*tKc s*tadk. 

TirwcTvadkcv is au^toma-tidally 

displayed and pv-cssmg ba^k button 

•Pv-orw hc\rc will e 乂 rt -the 外 p. 
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Wouldn t it be dreamy if you could 
handle the save and cancel button the same 
way, just returning data when you save? But 
I know it's just a fantasy... 


you are here ► 


329 





using startActivityForResult 


Use startActivityForResult 

There is a mechanism built into Android for launching a new Activity for 
a result, which is exactly what the TimeTracker is doing by launching the 
AddTime. The key difference is that the new Activity is started using a 
special call, startActivityForResult. And when the new Activity is 
finished, a method called onActivityResult is invoked on the calling 
Activity with the resulting data. 


Here is the flow between the two Activites 


TimeTracker 


/ 


Activity 

Started 



This \rcpla^s ihc ta\\ 
■to sia\riAdiiviiy. 


attW'ity started 

-f misled, is auWat*tally 
called y/1-tK *tKc rcsul-t data. 



onActivityResult 


The vc^ucs-t 匕 ode is 
used "to lihk vcspohscs 
"to \rc<\ucsts. 



request code 


pa-ta patkayd kc-fov-c *tK( 


AddTime 


Activity 

Started 


t 



usev \>v-csscs 
save, 

A 乙七 W» 七 y 
patkays 
up usev- 
cr\*tcv-cd 

dd*bd 

tails -f misK 


/ 



Activity 

Stopped 
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Update starting the Activity 

The start Activity For Re suit will work for 
both the Save and Cancel flows. Before implementing 
the save functionality, let’s go back and update the 
Save flow to use startActivityForResult. 

One difference between start Activity and 
startActivityForResult is that but you need 
a request code. This request code is passed back in to 
the calling Activity when onActivityResult is 
called so the you can correlate the responses to the 
screens you’ve started. 



Now remove the start Activity call and instead 
call startActivityForResult passing in the 
intent and the request code. 


public boolean onMenuItemSelected(int featureld, Menultem item) { 
if (item•getltemld() == R.id.add_time_menu_item) { 

Intent intent = new 工 ntent(this, AddTimeActivity.class); 

start Activity (i nt r?n t) ■;■ 

startActivityForResult(intent, TIME ENTRY REQUEST CODE); 




Replace the si^\riA^iiviiy dal I y/iih 
a tail io sta\rtA^iivityFov-Rcsult 


return true; 


Pass m errbry 


return super•onOptionsItemSelected(item); 






TimeTracker.java 
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implementing save 


Implement onSave 

The Cancel flow looks great, so let’s move on to the Save 
flow. You’ll start by implementing the on Save method 
invoked by the Save button when clicked. You’ll implement 
this method in the AddTime Activity. 



that invoked the AddTime is going to be returned to the 
Time Tracker Activity. So you can put these values in 
a Map inside the Intent. Then you can retrieve those 
values from the 工 ntent in the TimeTracker Activity. 


Add the usev- chtcv-cd 
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onSave Magnets 

Below is the empty onSave method from the AddTime Activity. 
Use the magnets below to complete the method. You’ll need to 
retrieve reference to both EditTexts as well as the Intent. Then 
use Intent’s putExtra method to add values to the Intent’s Map so 
that you can retrieve them later from the TimeTracker Activity. 
Finally set the result of the Intent to RESULT OK which you’ll use in 
the onActivityResult method to determine whether the Save 
or Cancel button was pressed.. 


public void onSave(View view) 



EditText notesView = (EditText)findViewByld(R.id.notes—view) 


intent .putExtra (''notes'', timeView. getText () . toStrmg 0 )； 



AddTime.java 


EditText timeView = (EditText)findViewByld(R.id.time—view); 



f ini sh 
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processing the result 



onSave Magnets Solution 

Below is the onSave method from the AddTime Activity. You should 
have used the magnets below to complete the method. You should have 
retrieved references to both EditTexts as well as the Intent. Then using 
the Intent’s putExtra method, you should have added values to the 
Intent’s Map so that you can retrieve them later from the TimeTracker 
Activity. Finally you should have set the result of the Intent to RESULT OK 
which you’ll use in the onActivityResult method to determine 
whether the Save or Cancel button was pressed. 


public void onSave(View view) 



Callmj \rebrieves ihc 

… 七⑶七 -P\rorw d A 匕七 



a bo -time Ed’rtU ， 

value m usmj 如吒 


EditText timeView = (EditText)findViewById(R.id.time_view); 
intent. putExtra (''time'', timeView . getText () . toString ())； 


今 et a Yt^cctr\Ct {jo the Y\oits a^d put 

its value *m the ’… 七⑶七 us'mj 七 he stv-'mj dems^ta 的七 . 


EditText notesView = (EditText)findViewByld(R•id•notes—view) 



this.setResult(RESULT OK, intent) 


finish(); 


Sci the \rcsuli -to 0i( av\d 
pass m -the 


Finish -the ad-tivi-ty. 


t\itt Foo{ I #， 

-J 

AddTime.java 
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Implementing owActivityRcsult 


You’ve completed the on Save method, which 
packages up the user entered data in the calling 
intent. It also calls finish on its Activity which 
pops that Activity off the stack and returns 
to the Time Tracker Activity, calling its 
onActivityResult method. 

T\\tr\ 七〜士 /Result yb tailed 

•m TimcTvadkcv Ue 朽七 

Pmish jets tailed, 仏你 pletmg do 山 mnr^ the \rcsuli daia* 

「 the ^v\d \ 

>^L '"bd-P -Pv-om -the stadk. 

finish() onActivityResult() 



In the TimeTracker onActivityResult 
method, you’ll retrieve the values from the 
Activity using the getStringExtra method, 
using the map keys used to add the values. Then 
you’ll create a new TimeRecord object with 
the values and add it to the List Adapter. 


Cv-Cd'tc d nCW TirwcRcdoV-d 
objedi v/i-th ihc data -Pv-om 
七 he vesul 七 m 七⑶ 七 . ^ 




Add 七 he 

TirwCV-CdoV*d "to 

the list 


result data 


TimeTracker 

38:23 

Fcding good! 


Lost some time on the hills! 

29:42 

Ywh b^byt jo«’s going down! 
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displaying new data 




aa] Plizzjc 


Your job is to take the code fragments 

from the pool and place them into the 
onActivityResult method. You 
may not use the same code fragment 
more than once. Your goal is to make 
a new item display in the list.. 


protected void onActivityResult(int requestCode, int resultCode, Intent data) { 

if (requestCode == TIME—ENTRY—REQUEST—CODE) { ^ — This dhcdk makes suv-c the V*c<\ucsiCodc 

if (resultCode == RESULT OK) { is ihc Code you passed 

This dhctks i\\ai ihc resultCode is 
R6£ULT__0^. Smdc you dW 七 se 七七 
v-esuli Code m 七 he o^Ca^dcl, 七 his Will v-c*tuvy> 

ms*tc3d o-f *tv*yn^3 add d 灼 ow rtem. 



Note: each thing from 
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This week’s interview: 

Are Intents Under Appreciated? 


Head First ： Hi Intent, thanks for speaking with us 
tonight. 

Intent ： Happy to be here, try and tell my story a 
little bit, you know. 

Head First ： Wow, your story? Sounds like you have 
something on your mind. What’s up? 

Intent ： It’s nothing new really. I just don’t get a lot 
of respect around here. I mean, I can do an awful 
lot! I help start Activities, I let everyone know where 
to go, and I can store and communicate data myself 
as I move around the system. 

Head First ： That all sounds right. But it sounds like 
you’re not too happy about it. 

Intent ： I feel bad coming here and complaining, 
but I just never get to see the spotlight you know? 
Activities get to interact with users! I just have to 
hang out in the background while they get to shine 
on the screen. 

Head First ： It must be awful for you to just sit 
there while the Activities are out there displaying 
themselves to users, getting their buttons pressed... 

Intent ： Hey! You don’t have to rub my face in it, 
Okay? 

Head First: Oh, Fm sorry, I didn’t mean... 

Intent ： It’s Okay. I’m used to it. 


Head First ： No, I’m telling you that you are really 
important. You may be sitting in the background 
while the Activity is displayed, but you have to keep 
track of really important information know 
how the Activity was launched, and you include any 
information passed in to the Activity. 

Intent ： That’s true... 

Head First ： And as you’re sitting there in the 
background while the Activity is displaying, you get 
asked for your information and new information gets 
passed to you. Like when information is added to 
you to get sent back to a calling Activity after calling 
startActivityForResult. 

Intent ： That’s true too. 

Head First ： I think you need to change your 
mindset. You’re not under appreciated, you’re the 

strong silent type. 

Intent ： The strong silent type... I think I like the 
sound of that. 

Head First ： Glad you’re feeling a bit better. That’s 
all the time we have tonight folks. Give Intent a 
big round of applause before going back into the 
background and we forget about it! 

Intent ： Hey now! 

Head First: Kidding, man. Kidding. 
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Paa] puzzjc 

Your job is to take the code fragments 

from the pool and place them into the 
onActivityResult method. You 
may not use the same code fragment 
more than once. Your goal is to make 
a new item display in the list. 


protected void onActivityResult(int requestCode, int resultCode, Intent data) { 


if (requestCode == TIME—ENTRY—REQUEST—CODE) { 


if (resultCode == RESULT OK) { 


七 he values 


String notes = data. getStringExtra (''notes''); 
String time = data. getStringExtra (''time''); 


Cv-caic a 

TimeKcCo\rd dr\d add 
it -to 七 he I is 七 adaptev-. 


timeTrackerAdapter. addTimeRecord ( new TimeRecord (time, 



notes ) 〉 ； 


timeTrackerAdapter.notifyDataSetChanged(); 

TWis wrbW 1 士 如心七 

V—_ 如 data V^as 

update d_laY. 


Note: each thing from 
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Tost DriVq 


Everything is all wired up! Run the app and run through the complete 
flow of adding a new time. Invoke the Add menu item, enter a time and 
some notes, and press save. And you’ll see a new item added to the list! 


TimeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine. 

26:21 

I totally rocked it! 

29:42 

Lost some time on the hills. But pretty good. 


P\rcss the bu-fc-fcoh 

select the Add 

rnCVWA item. 


I 25:08 ~ 



My best run yet! 

A 

、 Errtev* a "time 
and ⑽七 es. 




Pvcss save- 


Fantastic Work! 


3E ||g 

| 1 9:12 1 

TimeTracker 


38:23 

Feeling good! 


49:01 

Tired. Needed more caffeine. 


26:21 

I totally rocked it! 


29:42 

Lost some time on the hills. But pretty good. 


25:08 

My best run yet! 


— 
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Og Piste - 

You just did some seriously heavy lifting to get data entry working. Can’t get enough? 
Here are some more features you could implement to make the app even better! 


Build td\i Bv\d dele 七 e 

\r\ this dKaficv-, you buili a 

竹 ism *to ddd rtcw>s "to "the 

list. Bu 七 Y/hai i-f a usev- CY\itvs i\\t 
y/voy\^ us ^" s 

add *m-fovma*tio>r\ is ycat bu 七 youv- 
uscv*s v/ill cvcjr\"tu3lly v/d>vt "to be able 
-to edit and delete as v/cll. 


Build dh dbou£ sdVCCh 

The bulk of -the havigatioh ih this 
^ayic^r used sta^tivityFo^esult 
to manage data e+y. TV*y kildi 叫 

ahoth 〜 ^^ch, like ah about 办咖 
^at displays but doeWt ,1；；^ 

data to the ^allihg Activity. Thihk 
about whether you waht that 

A^iivrty -to be ih -the hack siack a^d 
build it auord\^\y. 
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Your Android Toolbox 

Now that you’ve built 
navigation between two 
screens，you can apply the 
same logic to building navigation 
between as many screens as you like! 
Just not too many ， OK? 



• Create a 姊 吻一 ’ 七 

{jo use a ^ Layou-t 

參 Cv*c3*tc 3^ Ivrtwt 

參 Call star 七七 Y 饮 
startA^Wi-tYForRcsul-t *to \a^ a 

street 


Alc^u £-tcps 

a _ X 亂如；⑽忪咖 

X/WL -Pile wiz^vd 

^ Add mchu items usi h g ihe 3 一 々 I 
cdiW, oy edit -the vaw X^IL.. 

❸ Wlatc ihc r^chu usihg the /Wchu/h^latc^ 

，h thc A 0 hC ^^pt'Ohs/Wchu method i h 

youir n^*tivi*ty 

^ 七 he mchu a^tioh i h 

oh/Wchu/tcmScIc^cd ih youv^ Activity. 




BULLET POINTS 


Create new Layouts using the new XML file 
wizard, or by creating the XML files yourself. 

Reuse Activities with different layouts if 
the behavior is the same. If the behavior is 
different, create a new Activity. 

Remember to add a declaration for your 
new Activity in AndroidManifest.xml. If you 
don’t you'll get nasty errors! 

To launch a new Activity in your 
app, create an Intent and pass it to 

start Activity. 

If you’re staring an entry screen, use 
startActivityForResult to 
easily finish and return values to the calling 
Activity. 

Implement onActivityResult to 

receive the data returned from the screen. 

Create new Context Menu XML descriptions 
using the new XML file wizard. 

Show menus by overriding Activities 

onCreateOptionsMenu and 

process the selection events by overriding 

onMenuItemSelected. 

New screens are automatically added to the 
back stack. The back buttons uses this back 
stack when pressed. 

Call finish to complete a screen and 
automatically display the previous screen on 
the back stack. 

Use EditText for text entry 
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Store your stuff 





In memory data storage only gets you so far. in the previous chapter, 

you built a list adapter that only stored data in memory. But if you want the app to 
remember 6aia between sessions, you need to persist the data. In this chapter, you’ll 
learn to store your data using a SQLite database. You’ll learn how to create and manage 
your own SQLite database and you’ll learn how to integrate that SQLite database with the 
ListView in the TimeTracker app. And don’t worry, even if you’re brand new to SQL, you’ll 
learn what you need to get this app’s database up and running. 


this is a new chapter 
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data isn’t saving 


Uh oh, the times aren’t saving 


Donna is loving the app so far. It’s a 
straightforward app where she can enter her 
times and notes. And just like she wanted, 
it’s free of clutter from features she won’t use. 


But she pointed out a really big problem. 
When she closed the app and later reopened 

it, all of her times were gone! 



Viewing and entering 
times looks great. But 
the app is useless if I 
can’t save times! 
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... but you can save them using SftUtG 

The app currently loses all of the information 
added to list when you exit and relaunch the 
app. This is because newly entered times 
are stored in memory as objects inside the 
TimeTr acker Adapter. And once you shut 
down the app, the in memory data is gone! 


10:04 


丁 he Lis-tl/icw 

-Po\r youv- app. 


TlmeTracker 

38:23 

Feeling good! 


49:01 

Tired. Needed more caffeine. 

26:21 

1 totally rocked it! 

29:42 

Lost some time on the hills. But pretty good. 



The -fov 

youv is s*to\r'm^ all 
the daia'm memov-y. 


Android comes standard with a built in SQLite 
database implementation. SQLite is a lightweight SQL 
database implementation that stores data to a text file 
on the device. If you store the times in the SQLite 
Database and read them back in after you restart the 
app, you’ll have persistent data. 


Pcv*s*is*t tKc lis*t 

S<$L*rtc database dv>d display i\\t 

-fvom d3"toib3sc you I 

Kave fcvs*is*tcy>*t da*ta s-tova^c- 



you are here ► 


345 









planning database integration 


Storing times in the database 

You’ll have to touch several parts of the app 
to get database storage fully integrated. Let’s 
take a look at what you’ll be doing in the 
chapter to seamlessly persist data. 


1. Create a database for your app 

You’ll be storing the time and note data in a SQLite 
database. But before you can store data in the 
database, you have to create it. 




uv* / 
database 


Z. Save a time record 

Once the database is created, you can save times in 
it. Here you’ll define the database schema based on 
the data you’ll be saving. Then add the code to insert 
records directly into the database. 


Save 



Time 

Record 



3. Load time records 

It’s no fun to store data if you can’t access it. Here 
you’ll write the code to query the database and 
process the results. 



Record 


4. Update the List to use the database 

The goal is not to save and load data from a 
database in isolation. The goal is integrate database 
persistence in the existing app. With store and 
retrieval working, you’ll finish up by integrating all 
of your hard work back into the TimeTracker app. 


Display those times 
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Start by creating the database 

You can create and open databases directly inside 
your app. The best way to get off the ground with 
a new database is to extend a built in abstract base 
class called SQLiteOpenHelper that provides 
you with all of the basic behavior to manage a 
database. 

Create a new class called 
TimeTrackerOpenHelper that extends 
SQLiteOpenHelper. There are three methods you’ll 
need to implement that descrive how to connect to 
your database, initially create tables, and upgrade 
from previous versions. 



Create a new class called 
TimeTrackerOpenHelper 
that extends SQLiteOpenHelper. 
Pass the database name and 
the database version to super. 
Make empty implementations of 
onCreate and onUpgrade. 


private static class TimeTrackerOpenHelper extends SQLiteOpenHelper 


TimeTrackerOpenHelper(Context context) 
super (context, ''timetracker. db'' 

i Rass -the o-P "the — 

database to supev- 


null, 1); 

Pass vcvs*ioy> 
•fco sufev- as y/cll- 


public void onCreate(SQLiteDatabase database) 

C\rcaic you\r -tables *m heve - ^ 


public void onUpgrade(SQLiteDatabase database 
int oldVersion, int newVersion) { 


tUss Foo{ I 

TimeTracker 

OpenHelper.java 
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using an open helper 


Iwstawtiate the OpenHelper 


The database is created internally by 
the Open Helper when it is instantiated. 
In Time Tracker ， add the following 
line creating an instance of the 
TimeTrackerOpenHelper. 




Add the line to instantiate the 

TimeTrackerOpenHelper in 
theTimeTrackeronCreate 

method, then start the app. 


public void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R•layout•main) ; 

ListView listView = (ListView)findViewByld(R•id•times_list); 
timeTrackerAdapter = new TimeTrackerAdapter(); 
listView.setAdapter(timeTrackerAdapter); 

TimeTrackerOpenHelper openHelper = new TimeTrackerOpenHelper(this) 

} V youv tusW 

0 \>ey\ Kclpcv- v/'ill tausc 
database bo be treated. 



TimeTracker.java 


tliereictre no o 

Dumb Questi9ns 


Do I have to call a method on the OpenHelper to create 
the database? 

No. When you instantiate the OpenHelper, it automatically 
creates the database for you. 


Cool! Where does it go? 

It’s stored on the device under /data/data/<package-name>/ 
databases<database-name>. If you're ever curious about what’s in 
the database, you can always open it up in SQLite databse browser 
and look at its contents. 
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Prowsc to the database file 


After running the app with the Open Helper being created, you 
won’t notice any visual differences. But there are big changes 
behind the scenes. When you instantiated the Open Helper, the 
database file was created and saved to your applications persistent 
storage. 

You can view the file by opening the Android File Explorer. Go to 
Window Show View - Other, expand the Android folder and 
select File Explorer. Then navigate to com. headf irstlabs . 
t imetracker \databases\ and you’ll see a file called 
timetracker.db. 




The s3 vc button "fco 
save the database "to 
you\r -file sys 七 erw. 


Hi ： Problems 

@ Javadoc 

區 Declaration 

^ Console 

■ 释 | Log C at 

f. 门 

^ Devices 


ilii File Explorer £3 


► 1^7 com.an d ro i d .te rm 

► & com.an droid .wal Ip^per.l ivep icker 

► C3 1 com. e Kam pi e.and roi d .a pis 

► 123 corn-exam pi e.andrQicU ivecy bes 

► 1^ com.e xampl e.android.s oftkeyboard 
▼ & com. headfirsll abs .t i m etracker 

▼ & databases 

_ timetracker.db 
► &!ib 

► l 23 com,&vox.pico 

► l23jP-ca.onfironsoft.openwnn 
► l^ 7 dontpanic 
► 色 local 

& lost 十 found 


Size Date Time Permissions Info 

2011-0#-12 14:22 drwrar-K—x 
2011-09-12 14:21 drwxr-x - -x 
Z011-10-05 18:21 dr^xr-x~x 
2011-10-05 18:20 drwxr-x--x 
2011-10-05 18:20 drwxr-x -- x 
2011-10-05 19:15 drwxr ， x〜x 
2011-10 - 05 19:15 drwxnwx—x 

3072 2011-10-05 19:15 -rw-rw - 

2011-10-05 19:14 drwxr-xr-x 
‘2011-09-12 14:21 drwKr-x--x 
21:10 tirwxr-x -- x 
2011 - d rwxr -] 
2011-09-12 14:2 
2011-09-12 14:20 drwa^ 



Select the database file and press the save icon. 
This will allow you to save the entire database file 
locally and view it. Here is a screenshot of the 
sqlitebrowser (http:/ / sourceforge.net/projects/ 
sqlitebrowser/) displaying the contents of the 
database. Right now the database is empty, it just 
includes some default metadata. 


The s^|i-tcb\rowscv- 
viewmj 七 he s^liic 
database -file- 


Name Object Type 

▼android.metadata table 

locale field TEXT 


CREATE TABLE android.metadata (locale TEXT) 
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designing your database 


Pesign the database 


You now have the database being created with the 
open helper. But it’s empty. Now look at what you need 
to store and how to structure the database to store 
that information. The data for this app are already 
stores in the TimeTrackerAdapter in a list of 
TimeRecord objects. Now you need to store that 
same information in the database. 

You can store this by creating a single table called 
time re cords with a column for time and notes. 


T\\t T"imcRcto\rd 

its -fields 



Gee| 


Notice that the sqlite database file is 
called timerecords.db. The file’s name is 
controlled by the database name string 
you passed into the constructor of the 
SQLiteOpenHelper. 



IP 

i\^t primary key 
-Po\r 

TWis is s*bar\dav*d 
-fo\r 

databascs. 


， id 

time 

notes 

1 

38:23 

Feeling good! 

2 

49:01 

Tired. Needed more caffeine! 

3 

26:21 

工 totally rocked it! 

4 

29:42 

Lost some time on this 
hills. But pretty good. 


Sample 

da-ta 
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Create the initial table 


The database design includes the one 
timerecords table that you’ll need to create 
when the database is created. You overrode the 
onCreate method in SQLiteOpenHelper 
when you wrote the TimeTrackerOpenHelper 
which created a blank database. Now that you 
know what the database should look like, you need 
to include the code to create that creates the initial 
table. Here is the SQL you’ll need to execute. 


create table timerecords ( 



S 没 L 

■feo -the 

*tirwcv*cdov*ds 七 able 


id integer primary key time text, notes text 


D 


thereicir 

)umb 


e no o 

Questi9ns 


How much SQL do I need to know for 
developing Android apps? 

That really depends on your app. Some apps just 
set up a very basic database and display its contents. 
Others do very complex things with their database, like 
very detailed queries using very intricate database 
schemas. We won’t go into a lot of detail about the SQL 
part of SQLite in this book. If you’d like to know more, 
we can suggest you read Head First SQL 


0 ^ vciry biased suggesti 
oh whcirc -to 



about S^L. 
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creating your database 


Updating the database creation 

Update your onCreate method to the following. 

A SQL iteDatabase instance is passed in which 
is an Object wrapper around the SQLite Database. 

You can execute SQL using the exec SQL method. 


public void onCreate(SQLiteDatabase database) 
database. execSQL ( 

Call oh "create table timerecords " + 

the 




(id integer primary key, time text, notes text)" 


Pass \ y \ S 夕 L 

statam ⑶七七 o 

•the *timCV-C^o\rds table. 




TimeTracker 


If you run the app again, you still won’t see any visual 
or functional change in the app. But you did update the 
TimeTrackerOpenHelper onCreate to update 
the database creation. So check the sqlite database file 
for schema changes. 


OpenHelper.java 


SQLite Database Browser - /Users/jonathansimon/Desktop/timetracker.db 




睹 if Bf ㈣ [ 圍 ； 阶 


Database Structure Browse Data Execute SQL 



Name 

Object Type Schema 


android_metadata table 

locale field TEXT 


CREATE TABLE android metadata (locale TEXT) 



Looks i\\t same as brfo 代 . 
Uo *t3klc m 
ddidkase 七 ure. 
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Exactly why did the 
database not change? I*m not 
going to get very far with 
databases if I change the 
code and nothing happens. 


It’s because the database is persistent 

The SQLiteOpenHelper is helper class for creating 
and managing the SQLite database, which you’ve 
seen is stored in a file for persistence. This way, data 
stored in the file will be available after the app process 
is exited and restarted. 

But the code that was just updated was for 
onCreate which only gets called when the database 
is created. The database doesn’t get created each time 
your app runs though, only the very first time. That’s 
what makes the data persistent. 


Keep reacting to see kow to upctate tke database 
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Implement onUpgrade 

At this point you have a database you need to update. 
You need to add the time re cords table to the 
original empty database. This pattern of updating 
a database’s schema is common so the open helper 
provides a mechanism for it. 

In the TimeTrackerOpenHelper constructor, you 
passed a version number of the database to super which 
is cached along with the database. If the version number 
changes, onUpgrade is called for you to update the 
database as needed. 

In this case, the upgrade will be quite simple. You just 
need to drop the database and recreate it. 


public class TimeTrackerOpenHelper extends SQLiteOpenHelper 


TimeTrackerOpenHelper(Context context) { 

super(context, "timetracker.db M , null, 2 ) 


r Update -the vcv-sio^ 

^urwbcv- passed -to 


supev- 


public void onCreate(SQLiteDatabase database) { 
database.execSQL( 

"CREATE TABLE timerecords " + 
n (id INTEGER PRIMARY KEY, time TEXT 


notes TEXT) 


public void onUpgrade(SQLiteDatabase database, int oldVersion, int newVersion) 

Pvop tine tak database .execSQL ("DROP TABLE IF EXISTS timerecords"); 

•they j 

dall oXrtait. L onCreate (database); 



TimeTracker 

OpenHelper.java 
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Tesr DriVq 


Now that you’ve updated onCreate, updated the version number and 
implemented the onUpgrade method, it’s time to test this out. Run the 
app again and inspect the sqlite file in a viewer. 



Tke database is upctatect! 



Don’t forget to update the version number. 

The onUpdade method will only get called if the version 
number, is updated. If you update your database 
schema, make sure to update the version number or 
the database will not get updated to the latest version. 
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picking the important stuff 


Using the database m your app 

The OpenHelper isn’t a database itself. But it does create 
the database for you, and gives you access to it. You don’t 
have to manually create the database, that’s done for you 
when you instantiate the OpenHelper. But you do need 
to call one of the get Database method to retrieve a 
reference to the SQLiteDatabase object. 

Once you have the SQLiteDatabase, you can call any of 
the methods to insert, delete, execute raw SQL statements, 
and more. But first, you need to get a reference to the 
database from the OpenHelper. 

There are two methods you can call to retrieve the database, 
getReadableDatabase to retireve a read only 
database and getWr it able Database and to retrieve a 
database you can read and write to. Since you’ll be writing 
to the database when you add new times, you’ll be calling 
getWritableDatabase. 


Call jcil/VH-tablcDatabasc (oy 
jctRcadablcDa-tabasc) -to get 
a a database 


The Opchttclpcv* 
^caics ihc 
daiabase 、 



getWritable 

Database 




Use 七 he S^Li-tcDatabasc 
v-c*tuv-^cd *to 
v/iih ihc database 
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Exposed 

This week’s interview: 

What are you, exactly? 


Head First ： SQLiteDatabase, thanks for joining us. 
I know it’s hard to time away from your server to join 
us here tonight. 

SQLiteDatabase ： Thanks! But you know, I don’t 
have a server, that’s just soooo old school. I’m an 
individual. I work alone. I refuse to be downtrodden 
by the shackles of a server... 

Head First: Wow! OK, so no server. Gotcha. What 
exactly do you need to run? 

SQLiteDatabase ： Sorry, I get a little carried away 
sometimes. My whole point is to run minimally. You 
can just drop my library anywhere, and without any 
configuration, setup, additional processes or weird 
data storage, you have a perfectly functional SQL 
database. 

Head First ： Seriously? If you don’t have your own 
process, where do you run? 

SQLiteDatabase ： I’m pretty flexible, you know. 

I run in whatever process runs my library. I run the 
their process. But I don’t take much. I’m a drifter. 

Head First ： Cool! And where do you store your 
data? 

SQLiteDatabase ： On the regular file system in a 
plain old file. 

Head First ： Between running as a configureless 
library and storing your data in a plain file, is your 
functionality limited? 

SQLiteDatabase ： No way! I’m super powerful. I 
can do multiple tables, triggers, indeces and all kinds 
of fancy stuff like that in my one little file. 

Head First ： Wow, Fm impressed! 


SQLiteDatabase: You should be. Also, I weight a 
pretty slim 350k. But when apps need me to be super 
small, I have a special diet I can go on and drop 
down to under 200k. I’m just cool like that. 

Head First ： Stop, you’re killing me! How do you fit 
that all in there? 

SQLiteDatabase ： A lot of folks use me, and they 
care a lot about making sure I’m super optimized. I 
have my own consortium, you know. 

Head First ： Seriously? 

SQLiteDatabase: Yeah! You should check it out, 
sqlite.org. You can see all of the folks there that make 
me happen. 

Head First: That’s amazing! Tell me a bit about 
your object representation on Android. 

SQLiteDatabase: Well, as you can guess, I run 
inside an Android app’s process when I’m used. 

But they need some way to interact with me. So the 
Android engineers built be a nice Object wrapper 
called SQLiteDatabase. Once you get an instance 
of me and my wrapper, you’ve got a fully functional 
SQLiteDatabase at your disposal. Literally, I’m all 
yours! 

Head First ： That’s just fantastic. The power of a 
rock solid, fully featured, yet small footprint database 
built into every Android app. It’s a beautiful thing. 

SQLiteDatabase ： Can’t argue with you there. 

Head First ： Well, thanks for joining us 
SQLiteDatabase. That’s all the time we have, but I’m 
sure I’ll be seeing you around! 
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Database Helper Magnets 

Below is the empty implementation of TimeListDatabaseHelper 
and it’s internal SQLiteOpenHelper implemenation 
TimeTrackerOpenHelper. Using the magnets below, complete the 
implementation using constants and string concatenation for all 
helper methods.. 


public class TimeListDatabaseHelper { 


public TimeListDatabaseHelper(Context context) 


Put tohs-ba^-b Kcv-c 

〆 -fov- -baklc 

database version, tit- 


Call supcv- hcv-c 
’m ms-tedd 

o( \raw values. 


database = openHelper.getWritableDatabase(); 
private static final int DATABASE— VERSION = 2 


private static final String DATABASE_NAME = ''timetracker. db ,r ; 



private SQLiteDatabase database 



public static final String TIMETRACKER 一 COLUMN—TIME 

public static final String TIMETRACKER COLUMN NOTES = 、 'notes 〃； 
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private class TimeTrackerOpenHelper extends SQLiteOpenHelper { 

TimeTrackerOpenHelper(Context context) { 

Call su\>cv- ov\ 

- \>assm^ m 

t<ms*ba 灼 * b. 


public void onCreate(SQLiteDatabase database) { 

Cv-catc the database 

^ also us'm0 

^OhS-tahts -Pov- the 
cxcdS6JL tall 


public void onUpgrade(SQLiteDatabase database, 
int oldVersion, int newVersion) { 



pvof ar\A vcd\rca*tc 
i\\t database tables 
dovm Kcv-c-- 


public static final String TIMETRACKER COLUMN ID 


id' 


private static final String TABLE NAME = ''timerecords j 


super (context, DATABASE_NAME, null, DATABASE_VERSION); 


+ TIMETRACKER COLUMN TIME + '' TEXT, 
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Database Helper Magnets Solution 

Below is the implementation of TimeListDatabaseHelper and it’s 
internal SQLiteOpenHelper implemenation TimeTrackerOpenHelper. 
You should have completed the implementation using constants 
and string concatenation for all helper methods. 


public class TimeListDatabaseHelper 


^11 of ihe 

^ohs-bh-ts ^ 

■the da-bbase 
i^icirh^l values. 



private static final String DATABASE 一 NAME = ''timetracker.db 






private static final String TABLE NAME = 

''timerecords ”； | 


public 

static 

final 

String TIMETRACKER 一 COLUMN 一 

ID = "id"; | 

public 

static 

final 

String 

TIMETRACKER_ 

_COLUMN_ 

—TIME = ''time"; || 

public 

static 

final 

String 

TIMETRACKER 

_COLUMN 

_NOTES = 、 'notes 〃； 


private TimeTrackerOpenHelper openHelper 


private SQLiteDatabase database; 




S*tovc variables -fov- 
Opcir\ttclpc\r ay\d 
the database i*t opc^s 


public TimeListDatabaseHelper(Context context) { 

openHelper = new TimeTrackerOpenHelper(context); 


database = openHelper.getWritableDatabase(); 

the y/vi*tablc 
I database -Pvom -the 

opcir\ hclpcv-. 
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database persistence 


private class TimeTrackerOpenHelper extends SQLiteOpenHelper { 


TimeTrackerOpenHelper(Context context) { 



public void onCreate(SQLiteDatabase database) 


Build 

ddiabase 

table- 



public void onUpgrade(SQLiteDatabase database, 
int oldVersion, int newVersion) { 


D\rof By\A 

the 

table oy\ upyadc. 
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saving your data 


You caw implement save with execSQL 

Now that you have a clean encapsulated helper class 
for managing your database, let’s implement saving 
time records into the database. Start by adding a 
method to TimeListDatabaseHelper to save a 
time record called saveTimeRecord. 

Passing in the time and notes values as input 
parameters and constructing a SQL statement using 
string concatenation, you could write this method. 



public void saveTimeRecord(String time. String notes) 
database .execSQL (''INSERT INTO TIMERECORDS'' 
f、' (TIME, NOTES)" 





VALUES ( 


+ time + 


notes 




The drtdl 
values a\rc passed *m*to 
save rwethod as ’mpu 七 
pa\rarwctc\rs. 


The mpu 七 pa\ramc*tc\rs av-c pv-opcv-ly 
by\A 'm -the S 夕 L statement 


Ko*bc spates a*t tiic 

pv-opcv- spatmj *tV^c S(§L 
siaic^i will tWow trror. 



leUss Foo{ I 

□ 


TimeTracker 

DatabaseHelper.java 



Watch it! 


Be careful with execSQL and raw SQL strings. 

SQL statements in your code are not checked by the 
compiler. So if you have errors in your SQL statements, you 
won’t know until you run them. In many ways, these dynamic 
SQL stataments where you're concatenating multiple strings 
at runtime are even worse! At least with complete SQL statement strings 
you can visually inspect the SQL statements for accuracy. Dynamically 
generating SQL statements at runtime can be quite difficult to debug. 
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... but if s a lot better to use insert 

Knowing that dynamically creating SQL statements 
to execute at runtime can be quite difficult, Android 
provides a number of utilities to help you avoid this. 


One of these utilities is the insert method on 
SQLiteDatabase. Insert takes a parameter 
called Con tent Values consisting of a set of key/ 
value pairs consisting of the table column name and 
the value to insert. 


public void saveTimeRecord(String time , String notes) { 


ContentValues contentValues = new ContentValues(); 


contentValues.put(TIMETRACKER_COLUMN—TIME, time); 
contentValues.put(TIMETRACKER_COLUMN—NOTES, notes); 

database•insert(TABLE—NAME, null, contentValues); 


TimeTracker 

DatabaseHelper.java 



Does executing an insert from a 
raw SQL function work? 

Yes, it works just fine. You can 
execute arbitrary SQL statements using 
execSQL. 



0K，so I could use either. What 
makes the insert method so much 
better? 

There are a few things that make 
the insert method much better to use. 

First of all, you don’t have to worry about 
the syntax to combine the strings. With 
execSQL, you have to combine the insert 
and the database name with the fields 
you’re inserting in to, plus the values. And 
all this has to be properly formatted with 
spaces, commas, parentheses, and other 
formatting. 


So I don’t have to do any of that 
formatting with insert? 

Correct. You’re passing the same 
information, but organized in a data 
structure rather than a raw String. This 
helps you avoid a lot of the nastiness of 
piecing together all of these bits of Strings 
in SQL statements. 
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Add database access to TimcTracker 

Now that you have a database setup and 
configured to save time records, you can 
start saving times entered in the app. Start by 
removing the TimeTrackerOpenHelper 
from the TimeTracker and replace it with an 
instance of TimeTrackerOpenHelper with 
a member variable to reference later. 


public class TimeTracker extends Activity { 

private TimeTrackerAdapter timeTrackerAdapter; 

private TimeTrackerDatabaseHelper databaseHelper 

d rwCrwbcv vd\ridble 
-Pov- ihc database hclpcv-. 

public static final int TIME—ENTRY—REQUEST—CODE = 1; 

public void onCreate(Bundle savedlnstancestate) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.main); 

ListView listView = (ListView)findViewByld(R•id•times—list); 
timeTrackerAdapter = new TimeTrackerAdapter(); 
listView.setAdapter(timeTrackerAdapter); 



Remove 
open Kclpcv. 


Ti rfi^Trn nl-rrHp^nR^l ppr oprnH^l r — n— T Ti m n Trn r 1 i l i iH j l l j_ u 1 1 f 1 +i 


r 


(hs-bhtiatc the 


databaseHelper = new TimeTrackerDatabaseHelper(this); 


hclpcv-. 

^~" In 


TimeTracker.java 
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Save new times to the database 

By adding the TimeTrackerDatabaseHelper 
to the TimeTracker Activity, you have access to the 
database and you can start saving times. 


You’re already saving times to the 
TimeTrackerAdapter in onActivityResult. 
Leave that code for now and add an additional call 
in onActivityResult to save the new time. 

Since the database helper is in view, just add a call to 
addTimeRecord with the new data after adding it tp 
the list adapter. 


protected void onActivityResult(int requestCode, int resultCode, Intent data) 
if (requestCode == TIME—ENTRY_REQUEST—CODE) { 
if (resultCode == RESULT—OK) { 

String time = data•getStringExtra(TIME—KEY); 

String notes = data.getStringExtra(NOTES KEY); 


databaseHelper.saveTimeRecord(time, notes); 

Save the ^cv/ly time -to the database by 

savcTimcRc^ov-d or\ youv da*tabasc hclfcv-. 

timeTrackerAdapter.addTimeRecord(new TimeRecord(time, notes)) 
timeTrackerAdapter.notifyDataSetChanged(); 




TimeTracker.java 


Now let’s get rid of some dead code before testing it out.... 
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testing your database 


Remove old code 


Before you run your new code to save new times 
to the database, take a minute to clean up the old 
,unused code you have in the app. 


Start by deleting the TimeTrackerOpenHelper 
from your project since you’ve moved your 
SQLiteOpenHelper implementation to inside the 
TimeTrackerDatabaseHelper. 


You cav\ delete 
ibis dass. 


TimeTracker 

OpenHelper.java 



You can also remove the code that adds the hard 
coded TimeRecords to the adapter. They were only 
needed since you didn’t have data persistence. Now 
that you’re storing times in the database, this will just 
be confusing. 



一 


public TimeTrackerAdapter() { 

t imes.add(now TimoRpoord( -— - 

'H 2 3 〃 , ― ''Fru- 1 i-m-f i-fi-n-iH 1 _ 

time3.add( TTSW" TiTTLekecora i 

''49:01”,~ M Tiied.~Needbd mu 上 e carigHrne -： f, ))f 
times.a dd(n c w T 丄 me Re oord ( 

工 士 “d 丄 L !〃））， — 

tiiULT - . J.U.U. (new — TimbRtiuu jl d'f — 



si I 七 es 七 

todt adding to&tA 

TimcRctov-ds m adap*tcv-. 





'' 29: 42”, ~^Logt, some ~ Llie h411s ■»» 什 i y 吵 vsM ：i _* 
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Tqst DriVQ 


Now run the app and add a new time. With your latest changes to the 
TimeTracker, you’ll save to the new time to the database as well as 
the TimeTr acker Adapter. 

You won’t see the database changes directly in the app. You’ll be able 
to do this later, once you connect the ListView to display results directly 
from the database. Meanwhile, you can view the data in the database 
directly and see that the new record is there. 


9:11 


TimeTracker 

Time 


25:08 



My best run yet! 



Save i\\t database -file loyally a^a'm 

-fvom i\\t File E^plovcv it 

•m a bvoy/sev. 

SQLite Database Browser - /Users/jonathansamon/timetracker.db 

Database Structure Browse Data Execute SQL 



Table: tirrierecords 



id 

time 

rotes 

1 

i 

25:0^ 

My best time yet! 
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queries and cursors 


Query the database 

It’s great that the time record is saving to the database, 
but in order to use the stored information, you need 
to be able to query the database. Just like exec SQL, 
SQL iteDatabase has a method called rawQuery 
that allows you to execute raw String based SQL 
queries on the database. 

Now add a method called getAHTimeRecords to 
TimeTrackerDatabaseHelper that will query 
the database for all time records. This method will 
execute a select all query against the database to 
return all of the rows in the time re cords table. 



public TimeTrackerDatabaseHelper(Context context) { 

openHelper = new TimeTrackerOpenHelper(context); 
database = openHelper.getWritableDatabase(); 


public void saveTimeRecord (String notes) { 

ContentValues contentValu^^^^new ContentValues(); 
contentValues .put (^^^TRACKER_COLUMN_TIME, time); 
ContentValues ： ^^^IMETRACKER_COLUMN—NOTES, notes) 
database•(TABLE NAME, null, contentValues); 


public Cursor getAHTimeRecords () { 

return database.rawQuery( 

"select * from n + TABLE^NAME, f 
null 

Tiicv-c avc y\o sclcd*t'ior> 
av-^s s'mde youVc sclcdtm^ 
dll o( vedovds. 


This selects all 

the irows. 




TimeTracker 

DatabaseHelper.java 
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SQLite queries return cursors 

A Cursor is an object wrapper around a 
database result set. The Cursor contains 
columns and rows filled with data. Think of it 
as a mini spreadsheet with utility methods to 
navigate the results and retrieve specific data 
values. 


T\\t database 

vc*tuvr\s d Cuvsov 


is passed 
七 he dal lev- o-f 


ytAIIT^cRctovds. 


TiiC dolumr^s -fyor 


i\\t database 



id 

time 

notes 

l 

38:23 

Feeling good! 

2 

49:01 

Tired. Needed more caffeine! 

3 

26:21 

工 really rocked it! 

4 

29:42 

Lost some time on this 
hills. But pretty good. 



The \rows avc -the data 
•{Vorw 七 he <\ucv-y. Y^>u\r «^ucv-y is 
\rciu\nr>*m5 all ot the data, bu 七 
a nr»o\rc speti-fid <^ucv-y may only 
a srwallcv- set 



Gce| Bits 


There are some disadvantages of using rawQuery just like using the raw 
executeSQL method. For a simple select all method, this works, but for 
more complicated queries where you'll be concatenating string values 
for column names and specific search criteria, this approach falls short. 
But just like the insert method, SQLiteDatabase has a several query 
helper methods to simplify complex database queries. 
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Navigating the cursor... 

Now you’ve queried the database and gotten a 
Cursor returned. Now let’s take a look at how to 
navigate the Cursor and retrieve data values. 

When you work with a spreadsheet, you have a 
selected row and column which brings a cell into 
focus. The Cursor works the same way. 

The Cursor keeps track of a selected row 
internally and includes several methods to update 
the Cursor’s selected row. 



v*ow. 


id 

time 

notes 

l 

38:23 

Feeling good! 

2 

49:01 

Tired. Needed more caffeine! 

3 

26:21 

I really rocked it! 

4 

29:42 

Lost some time on this 
hills. But pretty good. 


TKmk *this 

y/iiole vow \y\ *fodus. 


Row position 

methods 




Watch it! 


Cursors start out with the selected row 
set to -1. So if you try and retrieve a 
value based on that row, you’ll get a 
nasty exception. Make sure to call moveToFirst or 
moveToPosition before attempting to retrieve a value. 


Make sure to set the cursor row 
before retrieving values. 
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and retrieving values 


Once the desired row is selected, you can retrieve data 

values using separate getter methods for each data type. v-c*tv"icval 



Looking at this sample data set, if you move the cursor 
to the first row and then call getString ( 1 ), it 
will return the String “38:23”. 


The selected 
v-ow. 



Callm^ 代 *breWc 

value as a 
£.oliAW>r\ 3*t mdc% I. 




id 

time 

38:23 

— 

notes 

l 

Feeling good! 

2 

49:01 

Tired. Needed more caffeine! 

3 

26:21 

工 really rocked it! 

4 

29:42 

Lost some time on this 
hills. But pretty good. 


D 


there jcCl 

)umb 


e no o 

Questions 


How do I know which type getter to use? 


When you create your database, you assign a column type 
to each column. You can use whichever type you assigned to the 
column for the getter. 


What happens if I pick the wrong type? 


Android does it’s best to convert what’s stored in the 
database to the type of the getter method you called. If it cant do 
the conversion it will throw an exception. 
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iterating through cursors 


Iterating the cursor 


Sometimes you just need to get a single value 
from the cursor. In those cases, you can go 
straight to the row and get the value you need. 
Very often though, you’ll be iterating through a 
number of results and processing them in bulk. 


*tV>c database 
us'm^ hclfcv-. 


Cursor cursor = helper.getTimeRecordList(); 


Move 七 he duv-sov- -feo 七 he -Piv-s-t 
vow, dhcdkmj 七 he boolean 
^response bc-Po\rc 



if (cursor.moveToFirst()) { 

do { 

String time = cursor.getstring(1); 
String notes = cursor.getstring(2); 

Log.d(''DB Value'、，time +、'、'+ notes) 

} while (cursor.moveToNext()); 

} Move *fco i-f 

av-c move vows. 

if (!cursor.isClosed()) { 

cursor. close () ; Always make suve *to 

j dlosc duvsov y/hcy> 

youVc do 灼 c. 


Relieve 七 he data 

values -fv-orw -time 
notes dolumhs and 
p\rnrt 七 he value- 


Next steps 

Now you have data saving in the database, a 
query to retrieve the Cursor, and a way to 
iterate the Cursor to get specific values. Now 
you need to get the data from the Cursor into 
your ListAdapter 


Up Corme 乙七叫 

S<5L*i*tc database ar\A 
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Wouldn t it be dreamy if I could just 
put this Cursor in a special ListAdapter and 
everything would just work. But I know it's 
just a fantasy... 
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Use CursorAdapter 


The Android SDK includes a special adapter to easily 
get a Cursor working with a ListView called 
CursorAdapter. You’ll be able to instantiate 
a CursorAdapter, passing in a Cursor. The 
CursorAdapter then acts as a facilitator between 
the ListView and the Cursor to render the 
contents of the Cursor. 


Like BaseAdapter, CursorAdapter is an 
Abstract class with a few methods you need to 
override to integrate it with your list. But unlike 
the Base Adapter subclass overriding get View, 
CursorAdapter implementations override two 
separate method. One method, newView, inflates the 
view. The other method, bindView, is responsible 
for populating the view with the selected data. 



Tiic LisWiev/. 


T\)t tuvsov vc-tvicvcd -fv-om 
i\\t database iiclfcv- W\i\\ 

七 he tiw'C vctovd da*t3- 




-fco 

^orwrwuhidol-tc between the 
Cu\rso\r av\d "the List\/icw. 


D 


tWeiar 

)umb 


e no o 

Questions 


Do I have to use CursorAdapter? 


You could follow the idea from a few pages back and 
implement the CursorAdapter on your own. Unless you have a 
really good reason though, you should just use CursorAdapter. It 
will save you a lot of headaches getting going 


It looks like the getView implementation is split out 
into these two methods newView and bindView. Do I have to 
impelement getView as well? 

No. In fact you shouldn't. Just implement newView and 
getView and you’ll be all set! 
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Cursor Adapter Magnets 


Below is the updated TimeTr acker Adapter extending 
Cur s or Adapter. Implement newView to create the 
view and bindview to populate the view with data. The 
cursor manages all iteration, so you just need to call the 
getter value methods and render the results. 


public class TimeTrackerAdapter extends CursorAdapter 


T\\t adapW r\oy/ 
Cuv-sov-Adaftcv-. 


public TimeTrackerAdapter (Context context 

super(context, cursor); 

} Pass duvsov* 

*to sufev*. 

public void bindView(View view. Context context. Cursor cursor) 


Cursor cursor) { 


Add d Cuvsov- pavarw -to 

the do 灼 s*bru 匕 ■fcov. 


The adapiev handles all 
duvsov- i*tc\ratio^ (or you, 
you jus-t Y\tcd to display -the 
values m selected \rov/. 


public View newView(Context context. Cursor cursor, ViewGroup parent) { 


use the same viev/ 
-Pov -the display. Jus-t dvca-tc 

3 灼 m-fla-tcv- a^d m-Platc the 

view- 


} 

valueTextView.setText(cursor.getString(cursor.getColumnlndex(2)); 

Layoutlnflater inflater = Layoutlnflater.from(parent.getContext()); 


i 

TextView valueTextView = (TextView) view.findViewByld(R.id.notes viev 



TextView nameTextView = (TextView) view. f indViewByld (R. id. time view) 
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integrating the CursorAdapter subclass 



Cursor Adapter Magnets Solution 


Below is the updated TimeTr acker Adapter extending 
CursorAdapter. You should have implemented newView to 
create the view and bindView to populate the view with data. The 
cursor manages all iteration, so you just needed to call the getter 
value methods to render the results. 


public class TimeTrackerAdapter extends CursorAdapter { 

public TimeTrackerAdapter (Context context. Cursor cursor) { 
super(context, cursor); 

} 

public void bindView(View view. Context context. Cursor cursor) { 

TexWie^^iameTextVie|^^^(TextView^^ie^^^in^^^^^d(R^d^^^^^^ew)^^J 

TextView valueTextView = (TextView) view. f indViewByld (R. id. notes_view); 
valueTextView.setText(cursor.getString(cursor.getColumnlndex(2)); 


public View newView(Context context. Cursor cursor, ViewGroup parent) { 

丁 he Layoutlh-Platcv- 
is \rct\ricvcd 3hd the 
layout ih "m-Platcd 
amJ \rctu\fhcd. 


Layoutlnflater inflater = Layoutlnflater.from(parent.getContext()); 
View view = inflater•inflate(R.layout•list—item, parent, false); 
return view ;[ 


The ay\d 
y\o*tcs -f ields a\rc 
berth \re*brieved 
populated da*ta 

乙 alU 

{jo tu\rsov-. 
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Update TimcTrackcr 

The TimeTrackerAdapter is now updated to be a 
Curs or Adapter subclass. The last thing you need to do 
to use it is to update the TimeTracker Activity to use 
it. Start by passing in the context (this) and the Cursor 
containing the list of time records to the new adapter. 


public void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.main); 

databaseHelper = new TimeTrackerDatabaseHelper(this); 

ListView listView = (ListView)findViewByld(R•id•times list); 


timeTrackerAdapter = new TimeTrackerAdapter ( 

this, databaseHelper.getTimeRecordList()) 

listView.setAdapter(timeTrackerAdapter); 


Pass m Cuvsov 

a 灼 d 6or\*tc%*t *to 

i\\t adapter. 


Now remove the call to add a time record to the adapter. 
You’re already adding the time record to the database. 





protected void onActivityResult(int requestCode, 
int resultCode, Intent data) { 

if (requestCode == TIME—ENTRY—REQUEST—CODE) { 
if (resultCode == RESULT—OK) { 

Save hew time String time = data • getStringExtra (TIME—KEY); 

v*cdo\rd ih the String notes = data • getStringExtra (NOTES—KEY); 

Ad update the duv-sov- v — 

the adaptev* databaseHelper. saveTimeRecord (time, notes); 

timeTrackerAdapter.changeCursor( 

add 七 he databaseHelper.getTimeRecordList ()); 

time record *to ^ -fe imeTr a ckerAciapt e r ■ addT-a ： *fc e3); 

adapter a^ymov-c ov- 

ca\\ data 


-timoTra-gTfpr^dapt^gr. notif yDataSetChange 
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testing your hard work 




Tesr DriVq 


The TimeTrackerAdapter is now updated to a Curs or Adapter 
and connected to the ListView from the Time Tracker Activity. Go 
ahead and run the app. There is one time record stored in the database, 
so if everything works, you should see it in the list. 


555l 



Ult ok! Looks like tkere^s 
an error in tke code. 


ih you\r 乙 ode. 


O 



DoiVt stop now, youre 
almost there. Find 
and fix the error so I 
can start tracking my 
times! 
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Tracking down the error 


Open LogCat. If you closed it, you can reopen 
it by going to Window Show View Other, 
opening the Android folder and selecting LogCat. 


TKc c%dcp*tioy> s*tadk 
pv’m 七 ” 。 u 七 m LogCat 


>tai 


Caused by i ava . lancr 111 e q：=l 1 Ai- it 1 - 1 inentException: colijinn ■ id 1 does not exist 

at android. database. AlistractCuirsor . q^tColiJinnlndexOrTlirowf' AlistractCTjrsor. iava: 314 - ) 
at android. widcret ■ CuorsorAdapter. initCCuirsorAdapter. iava : 111") 
at android. widaet. CuirsorAdapter. < init > ( Cijrsorft.dapter . i ava: 9 CO 

at com . headfirstlabs . timetracker. TimeTrackeridapter . ^ird.t> CTimeTrackerA-dapter. iava : 14 - ) 
at com.headfirstlabs.timetracker.TimeTracker.onCreate ( TimeTracker.iava : 27 "J 
at android. app. Instrijjnentation. callictivityOnCreate ( Instrijmentation. iava : 1 047 - ) 
at android . app . ^tivityThi'ead . r»grf ormLaujui ： hAc ： tivit-v i；' A.c：t j -»-H 如甘 XfaTl 1 1 iViTl ■ 1 ~i 


If you look at the error, you’ll see the following 
error message “Caused by: j ava . lang. 

工 llegalArgumentException: column 
icT does not exist u . At first glace, it might 
seem strange as you have an id column in your 
database. 


But look a little closer, and you’ll see it’s not 
looking for a column called id, it’s actually 
looking for a column called _id with an 
underscore in front. 


The dldss ovevviev/ \v\ 

"the AoC% -fov* 

Cu\rsov-Adapic\r spcdi-Pics 
iha-t you heed av\ 一 ID 






Now that you know the problem, how are you going to fix it? Think about 
all of the steps you would take to implement the fix before going on. 
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ExeRciSe 


Below is the current complete code for the TimeTrackerDatabaseHelper. All of the 
changes you need to make to the database to update the table to use the —id column (with 
the underscore) instead of the id column (without an underscore) is in this class. 


package com.headfirstlabs•timetracker; 

import android.content.ContentValues; 

import android.content.Context; 

import android•database•Cursor; 

import android.database.sqlite.SQLiteDatabase; 

import android. database . sqlite . SQLiteOpenHelpere¬ 


public class TimeTrackerDatabaseHelper { 

private static final int DATABASE—VERSION = 2; 

private static final String DATABASE—NAME = "timetracker.db"; 

private static final String TABLE—NAME = "timerecords"; 

public static final String TIMETRACKER_COLUMN_ID = ，， id n ; 
public static final String TIMETRACKER_COLUMN—TIME = "time"; 
public static final String TIMETRACKER_COLUMN—NOTES = "notes"; 

private TimeTrackerOpenHelper openHelper; 
private SQLiteDatabase database; 

public TimeTrackerDatabaseHelper(Context context) { 

openHelper = new TimeTrackerOpenHelper(context); 
database = openHelper.getWritableDatabase(); 
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public void saveTimeRecord(String time. String notes) { 

ContentValues contentValues = new ContentValues(); 
contentValues.put(TIMETRACKER_COLUMN—TIME, time); 
contentValues.put(TIMETRACKER_COLUMN—NOTES, notes); 
database•insert(TABLE—NAME, null, contentValues); 

} 

public Cursor getTimeRecordList() { 

return database.rawQuery("select * from " + TABLE—NAME, null); 

} 

private class TimeTrackerOpenHelper extends SQLiteOpenHelper { 
TimeTrackerOpenHelper(Context context) { 

super (context, DATABASE—NAME, null, DATABASE—VERSION); 

} 

public void onCreate(SQLiteDatabase database) { 
database.execSQL( 

"CREATE TABLE M + TABLE—NAME +，，（，▼ 

+ TIMETRACKER_COLUMN—ID + " INTEGER PRIMARY KEY, 
+ TIMETRACKER_COLUMN—TIME + ，， TEXT , ，， 

+ TIMETRACKER_COLUMN—NOTES + ，， TEXT ) ，， 


public void onUpgrade(SQLiteDatabase database, 
int oldVersion, int newVersion) { 

database. execSQL ("DROP TABLE IF EXISTS，▼ + TABLE—NAME); 
onCreate(database); 
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Exe^ctSe 
SoLutioH 


Below is the complete code for the TimeTrackerDatabaseHelper. You should have 
made all of the database changes needed to update the table to use the —id column (with 
the underscore) instead of the id column (without an underscore). 


package com.headfirstlabs•timetracker; 


import android.content.ContentValues; 

import android.content.Context; 

import android.database•Cursor; 

import android.database.sqlite.SQLiteDatabase; 

import android.database.sqlite.SQLiteOpenHelper; 

public class TimeTrackerDatabaseHelper { 

private static final int DATABASE—VERSION 


Update vcv-sion r>umbcv-. 
This \will ^ause youv app *to 
ddll dvofs 

ar>d v-cdvca*tcs -the database. 



private static final String DATABASE—NAME = "timetracker. 
private static final String TABLE—NAME = "timerecords"; 

public static final String TIMETRACKER_COLUMN_ID = ; 

public static final String TIMETRACKER_COLUMN—TIME = "time"; 
public static final String TIMETRACKER_COLUMN—NOTES = "notes"; 



private TimeTrackerOpenHelper openHelper; 
private SQLiteDatabase database; 


public TimeTrackerDatabaseHelper(Context context) { 

openHelper = new TimeTrackerOpenHelper(context); 
database = openHelper.getWritableDatabase (); 


Tkese dkanges are subtle, l>ut really important 
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public void saveTimeRecord(String time. String notes) { 

ContentValues contentValues = new ContentValues(); 
contentValues.put(TIMETRACKER_COLUMN—TIME, time); 
contentValues.put(TIMETRACKER_COLUMN—NOTES, notes); 
database•insert(TABLE—NAME, null, contentValues); 

} 

public Cursor getTimeRecordList() { 

return database.rawQuery("select * from " + TABLE—NAME, null); 


private class TimeTrackerOpenHelper extends SQLiteOpenHelper { 
TimeTrackerOpenHelper(Context context) { 

super (context, DATABASE—NAME, null, DATABASE—VERSION); 


public void onCreate(SQLiteDatabase database) { 
database.execSQL( 

"CREATE TABLE " + TABLE—NAME + n ( n 

+ TIMETRACKER_COLUMN_ID + M INTEGER PRIMARY KEY, 
+ TIMETRACKER_COLUMN—TIME + " TEXT, n 
+ TIMETRACKER_COLUMN—NOTES + " TEXT )" 



public void onUpgrade(SQLiteDatabase database , 
int oldVersion, int newVersion) { 
database.execSQL("DROP TABLE IF EXISTS 
onCreate(database); 


You updated daiabase vc\rs*iov> ^i\\\cM will droy 
by\A rtertait i\\t database, Atsbro^^ all o( shared 
daia- I*f you *fou 灼 d 七 Wis o 灼 a p\rodudtioir> system wi 七 
v-eal usev^s diY\d v-cal daia, this is you >would 

*a*tc 

y\C^i 


▼ COM v -一 •- - I 

ovcvv'idc oy>Uf5vadc *to 

i\\t old database -fov-ma*t *to 七 V>c 


+ TABLE NAME); 


you are here ► 
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testing your fix 




Tesr DriVq 


Now run the app again. Since you updated the database version 
number, the database will be automatically wiped and recreated 
by the database management code when you start the app. 


TimeTracker 


The sdmcch s-ta\rts 
oui blank. 



It was saved, but you just 
cleared the database. 

When you upgraded the database 
version to “3” and reran the app, 
onUpgrade was called which 
dropped the time re cords table 
and recreated it. This wiped out 
any saved data you added while you 
were testing. 
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database persistence 


The database is starting off empty because it was 
just dropped and recreated. That shouldn’t effect 
new database records though. Add a new time and 
save it and you should see it in the list. 


a 

y\Cyj *t» 州 c 



^ ii 

_ _ 8:20 

TimeTracker 



Time 



32:54 





But here’s the best part. From the list screen, press 
the back button to exit the app and then relaunch 
it. Your data is still there! 



A-Ptcv you 

you’ll see 

'"t ih the list 


Vouv daia 
is pcirsis-ted 
a-Pitcir cxii 

扣 d \rcbuh 匕 h. 



TimeTracker 

32:54 

The hills were rough today. 


Excellent work! Your app is 
now storing anct loactingf ctata 
from a SQLite ctataLase. 
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happy customer 


O 



You rock! The app is exactly 
what I wanted. Simple, easy to 
use with no distractions, and 
now it saves my times. Awesome! 


Looks like another happy user! 

Although there are more features you could 
implement in this app, you’ll stop working 
on it here. Try implementing new features 
on your own, like editing and deleting time 
records to really take the app to the next 
level and make Donna even happier. But 
remember, don’t add too many new features. 
She liked her apps to stay simple. 

Have fun on your run, Donna! 
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database persistence 



GaOff Piste 


Now that times are saving in the database, you’re ready to move on. But if you’re still 
thirsty for more, here are a few additional features and exercises you could work on to 
start honing your Android database skills. 


於七 OY\\Ayyrdidt 

u 門 vddcd 七 he m 

七 his dha^tev* Vrthou 七 ovcv-v-idm^ 

orJ/pyddc *to handle "the 

6 \o ba^k modify 

dckdbdsc 3 

mi^v-a*tioy\ m o>r\Up^v*adc. 


Wsc ^ucv-yO 

/ou ^uc^ricd the database usi h a 
: a—u 饮 yO. But just like ⑽邱 
thisis limited ahd P ^e. Look 

，hto ihc ^y() methods 

ahd ^pl^cht a -Pew r^o^c detailed 
Wies agaihst y 财 database. 


Imflcmch-t dclcic dhd edii 

Right how you have ihc ability -to 

"the 3 hd add *bo i 七 . 

TVy implcmch*tmg methods oh youv- 
databasc hclpcv- -to edit fv-cviously 
Ch£c\rcd time o\r delete them. 
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picking the important stuff 



Your Android Toolbox 


You just built your first app 
with full persistent SQLite 
database support. Use this 
same process to add database 
support to all your apps! 


Cuvsov 

魯 6^ucv-y Database a^d a Cursor 

@ Move bo a v-ov/ UaWm 七 ^ 

Cursor 

魯 Retrieve data a 
參 Close Cursor youVe do^c 

Usihj Cursor 

@ Create a dlass 七 ha 七 c^tchds 
Cu\rso\rAdap*tc\r 

參 Create a dohS*t\rud*to\r 七 hat passes -the 
Coh-tex-t *fco super, as well as a dursov- 

^ Override hevA/iew *to ih-fla*tc ah )<ML 

\/icw (o\r d\rca*tc ohc p\rogyama*tidally) 

^ Override bihdU/icw 3hd populate -the \/icw 
wi*th d3*t3 -f\rom *thc du\r\rch*t du\rsoV- vow 



BULLET POINTS - 

■ Create your own databases for your apps so 
you can persist your app data. 

■ Use SQLiteOpenHelper to simplify 
database management. 

■ Wrap your SQLiteOpenHelper in a 

database helper class encapsulating your 
database and limiting access to it. 

■ Expose helper methods on the 
databasehelper to manage database usage 
throughout the app. 

■ Abstract constants and reusable pieces of 
your SQL statements to make your code 
resilient. 

■ Use Database helper methods for 
inserting and querying rather than the raw 
SQL methods when possible. 

■ Always take a look at Android’s built in 
components (like Curs or Adapter). 
They can save you a ton of work. 

■ Use CursorAdapter to connect your 
cursor to a list so you don’t have to write all 
that Cursor management code. 

■ Make sure and include an ” —id” column 
in your databse if you plan to use 

CursorAdapter. 

■ Remember to update your database version 
or delete the database if you make changes 
to your database schema. 

■ If you do update your database schama, 
consider implementing onUpgrade to 
migrate production data. 
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10 relcitlVe layout 


f It’s all relative 



You’ve created a few screens now using LinearLayouts (and 
even nested LinearLayouts). But that will only get you so far. Some of the 
screens you’ll need to build in your own apps will need to do things that you just cant’ do 
with LinearLayout. But don’t worry! Android comes with other layouts that you can use. IN 
this chapter, you’ll learn about another super powerful layout called RelativeLayout. This 
allows you to layout Views on screen relative to each other (hence the name). It’s new 
way to layout your Views, and as you’ll see in the chapter, a way to optimize your screen 
layouts. 


this is a new chapter 
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meet sam and scott 


Meet Taylor awd Scott two super tight 
skateboarding pals 

(And also dating. Well, this week anyway.) 



Scott and I like to 
skate together a lot. But 
sometimes we like to split 
up and skate at different 
places around the city. 


They worry about each other 
when they skate apart 

Skating can be dangerous. Crazy tricks, 
broken boards, cops... all kinds of things can 
happen! After chatting with Sam and Scott a 
bit, they asked you to build an app they could 
use to let each other know they are OK when 
they are skating separately. 
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relative layout 


l/Voah/ Now ihis looks dar^erous." — 


you are here ► 
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design the app 


Pesign the app 

Like all good apps, building this app starts out with a 
good solid design. After chatting with Sam and Scott, 
you found out that they want a really specific app. 
Here are the notes from meeting with them. 


Stott 



Keep it simple! I want one big 
button that I can use to text 
Taylor. No funny business or 
cutsie UIs. But it does have to 
look good if I*m going to use it. 


ftpp desvo^n no-tes 

• G.ea\\u s\rop\^ \ ican-t -to 

^rOOus on s\^8-t\no^ no-t 七 he 6pp. 

• just need one ⑺ ntecA 七 o 
message. 

• Kieed -to o\ 06 r\i^ see ichioh 

C/OPrt6C 七 

update \needto. 

• C>\q bu-t-ton to send a 七 ex 七 

ro0SS8Q0 ; rl 中七 in 七 he o^r 

screen so \ c^n ) 七 miss \-tl 
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relative layout 



Cohtadt 

ih-Pov-rhatioh 



ouv- skc*UV^ 
(or tiic app. 


butto 灼 *to 

stv\A 七 he 七 
message- 


Focus on the layout first 

In this chapter, you’ll focus on the layout. You’ll learn 
about a new layout called RelativeLayout that is 
much more powerful then plain old Li near Lay out. 


Turn tke page 
to get started. 
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investigating layouts 


Nested LmcarLayout implementation 


Based on the sketch, you could implement this layout using a 
combination of nested Linear Layouts (layouts inside other 
layouts are called nested layouts). But there’s going to be a lot 
of nesting! And you’ll need to be really careful to get all of the 
parameters right, like which Li near Lay outs are veritcal, 
which are horizontal, how to size components and all the good 
stuff you’ve been doing withLinearLayouts... just a lot more 
at once. 


Here is one way you could implement this layout using nested 
LinearLayouts. 


Hoviz^ovrtal 


Rooi sc,\rccv) layout a 

^ vcviidal L*mca\rLayout 
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relative layout 


This is getting complicated 

That’s a lot of layouts! Before you start writing the code 
for this layout, let’s take a look at the view hierarchy 
with the layouts and their children on a tree. 


Root vc\rtidal 
Imcav- layout 






The dcm*tad 七 

layout 

(ho\rizjo^*tal) 


The 

side o-f 七 he 
layout 


Linear I 

Linear I 

Layout I 

i — 一 — 

Layout [ 


Layout used *to 

position 
*tV>c Cool w 

butto 灼 


丁 v\cv/s or\ 七 he 
Ic-f-b S'dc 

a»s ? lav 



-- - 

Image 


Tm Cool 1 

View 


Button I 


The big 7^ Cool w 
but-fcoh -fco sehd 
the message- 


t 


The 

avatav- 


Update 

contact 

button 


WatcK it! 


Too many nested layouts kill really 
slow down your app’s performance. 


Not only is this nested layout structure 
complicated to code, but it will also slow the 
performance of your app. There are a number 
of back and forth calls between your screens’ layout 
managers and the Android layout management code, 
and each of these calls take time. The more layouts you 
have, the longer it takes to render your screens. For really 
complex screens, this can make a HUGE difference! 


There HAS to be a better way... 


you are here ► 
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a new layout 


Meet relative layout 


RelativeLayout is a layout that allows you to position 
Views on the screen relative to each other. Where 
Linear Layout positions all Views in a line - either 
vertically or horizontally -RelativeLayout let’s you 
express layout positions like “put this View below this other 
View” or “put this view to the left another View”. 

Add a view positioned w the parent 

Making your own RelativeLayout starts 
with an anchored view. This is a view that has 
an anchor on the screen referencing something 
about the parent view like the top left or right, the 
bottom left or right, or the center of the screen. 


TVis ,s 

positioned 七 he 

0*(* 七 ViC 
( 七 pa ⑽七） 

― 4 - 



T\\t sextet ^ 

(i\\t faveyrb m 


Add (a bunch) of other views 


You can add (and keep adding) views positioned 
relative to any other view on the screen. This 
positioning may be relative to an anchored view 
(like View B positioned relative to the View A) 
but it doesn’t have to be. You can also add more 
anchored views, and then other views positioned 


l/icw ^ is added 


"to the irigh-t o( 
view 


relative to that new anchor view too. 
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undev- v'icv/ ^ 


1/icw is -to the 
Hght o( view 































relative layout 


Are you ready for a challenge? 

The Android layout manager thinks you can layout the 
entire screen using just one RelativeLayout. Do 
you believe it? 





Sound impossible? TumAe page to get Started laying 
out Ae screen widi RelativeLayout and see for yourself! 
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anchor your first view 


Choose your anchor point 

The first step when you make a new RelativeLayout 
is to position a View in the parent. This is a view that has 
an anchor on the screen referencing something about the 
parent view like the top, bottom, left, right or center of 
the screen. From there you’ll position the rest of the Views 
relative to the first anchored view. 

For the layout, the first View that you’ll position in the 
parent is the contact Name TextView. And it’s going to 
be positioned to the top left hand corner. 


Youll s*tav-*t by 
a^hov-cd *to 七 

o( SdVCCW 





Once this first View is positioned, you’ll be 
able to layout the rest of the views around it. 
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relative layout 


l0j\ 


Ancliorect View Magnets 

Below is the very beginnings of a RelativeLayout.The layout is 
declared with a type of RelativeLayout and its width and height are set 
to fill the screen. The Textview for the Contact Name is also added, but 
not positioned. You’ll need to use the magnets with position parameters 
below to position the View. Remember, it should be positioned to the top 
left hand corner. Hint- you can use multiple positioning attributes together. 


<RelativeLayout 

xmlns : android= n http :// schemas.android.com/apk/res/android" 

android:layout_width="fill—parent" 

android:layout height= M fill parent "〉 Q I i 

_ - 么 tt— 

<TextView 

android:id= 〃 @+id/contact_name 〃 
android:text= 〃 Sam 〃 

android:layout—width= 〃 wrap_content 〃 
android:layout 一 height= 〃 wrap_content 


1 The 

Tiy • 七 \/iew 

^ v/i"thou*t 

)position aii\ribuics. 



The posi-tio^mj 
attv-ibu-tes t\ttd bo 
go 


/> 

</RelativeLayout> 




android : layout—alignParentBottom="true" 

This aii\ribuic positions 
七 he view -top 七 he -top J 

the pa\r ⑶七. 


This positions ihc \/icw b> 
七 he Hjlvt side o( 七 he 


android:layout alignParentRight=^true^ 



This posi-tio^s 七 he \/icw ai This posi-tio^s 七 he 
the -top o( 七 he view -fco 七 he Ic-Pt 

o( 七 he pav-CK>i. 



android : layout_alignParentLef t =,, true A, 
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testing the layout 



Anckored View Magnets Solution 

Below is the very beginnings of a RelativeLayout. The layout is declared 
with a type of RelativeLayout and its width and height are set to fill 
the screen. The Textview for the Contact Name is also added, but not 
positioned. You should have used the magnets with position parameters 
below to position the View. It should be positioned to the top left hand corner. 


〈RelativeLayout 

xmlns : android="http :// schemas.android.com/apk/res/android" 
android:layout—width="fill 一 parent" 
android:layout—height= n fill—parent"> 


<TextView 

android:id= 〃 @+id/contact—name” 
android:text= 〃 Sam 〃 


android:layout—width= 〃 wrap_content 〃 
android:layout—height= 〃 wrap_content 〃 

_This lays out 七 he 



/> 

</RelativeLayout 〉 



This lays ou 七 
"the to 七 he 
LEFT <^P -the 

pave 灼七 . 




main.xml 


These two attributes together position the 
Contact Name View at the top left of the screen. 
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relative layout 



Tesr DriVq 


Now that the first View is positioned, run the app and let’s make 
sure the View is positioned correctly. 




^ ml 


2:13 


The \/icw is 

positioned ov\ 

the "top Ic-ft- 



Babe, I'm Cool. 

Sam 


It’s close, but you can make it even better. The View is in fact 
positioned on the top left, but it needs some space so it’s not pinned 
to the edges. The font also needs to be a bit larger. Let’s make those 
updates to the layout before moving on. 


<TextView 

android : id= n @ + id/anchored—button" 
android : text= M Sam M 

android : layout_width= M wrap_content M 
android : layout 一 height= n wrap—content n 
android : layout—alignParentTop= n true" 
android : layout—alignParentLeft= n true n 

android : layout_marginLeft="20dp" 
android : layout_marginTop="2 Odp n 
android:textsize="2Odp" 

PolisV^m^ layout some 



blovj 七 love’s a I'rttlc 
b*i*t spade- 



Now it’s time to layout some more Views! 
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add another view 


Positioning views relative to ow screen views 

The Contact Name View is looking great! Now 
it’s time to add another View. The next view to 
add is the Phone Number view. You’ll position it 
under the Contact Name view. 


—W 如 ？ w 

wdev- 

Kdme 




Phor\c humbev 


N 


Attributes for relative positioning 
to other Views 

There are different layout positioning attributes 
for laying out Views relative to parents and 
relative to other Views on the screen. The 
Contact Name view is positioned relative to the 
parent, but the Phone Number View is going 
to be positioned relative to the Contact Name 
view (another view on the screen). 

Using these attributes 

You add these attributes to View declarations in 
the layout XML just like the other positioning 
attributes. The difference is that instead of 
using a value of true, you pass in the ID of the 
view you want to position your view relative to. 

This a-t*tvibu*tc is added *to 
七 he \/ic>w youVc 

android:layout below 


jr 


Position *to o( 



Position above -. 



Position below". 





Position *to 




w 


@+id/ con tact 一 name、' 

Hcvc you suffly V\t^i you 

-to position 七 his \/ic>M relative *to. 
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relative layout 


Add the phone number view 

This snippet shows the Phone Number Text View in the 
layout positioned using the android : layout—below 
attribute to be underneath the Contact Name TextView. 



<TextView android : id="@+id/contact—phone” 
android : layout—width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 
android :marginTop="5dp" 气 一 • Add some vcv-tidal spade- 

android: textSize=-10dp- <_ Sett— a s^ll^ 4 丄 . 

android : text= 〃 ll1-222-3333 〃 

android : layout below= 〃 @+id/contact name 〃 



main.xml 


Tesr DriVq 


Now that the Phone Number view is positioned, run the app and make sure it’s in the right place. 



TKc y^umbev 
v'ic>w is positioned 
uv>dcv- 七 he doy>*tad*t 
v*ic>w, bu 七 all 
>way *to -the 




How come the phone number field is all the way ow the left? 

... and so vertically close to the Contact Name view? 
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aligning your views 


Align your views 

You positioned the phone number TextView 
under the Contact Name TextView using the 
android : layout—below attribute. But why is it 
showing up all the way to the left? 

In this case, positioning the phone number field 
below the Contact Name field controls the vertical 
position, but not the horizontal position. And since 
the horizontal position is not controlled it’s defaulting 
to the left side. 


You can use alignment properties to fine tune the position 


When positioning isn’t enough, you can use the layout 
alignment properties to position a View. There are 
attribute for aligning to the left, top, right, bottom, 
and baseline of another View. 


android^layout_alignTop j ^ -- *to "the "top 

*to -- 

basel'me- - - ^ android: layout_alignBaseline 

android: layou^aligHRight^ 专州咖 *to 妞 e 叫 ht 


o\ view- 


android : 1ayout_alignLe ft 

*to 

bo*t*tom 


android : layout_alignBottom 




Just like the android : layout—below attribute, 
pass the ID of the View you want to align to. 


—Ali^ *to Ic-ft*. 

jT 

android:layout alignLeft = 


... of view. 



x> @+id/contact name '、 
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relative layout 


Here's the complete layout so far 

Adding bits and pieces at a time can make it hard to see the big 
picture. Take a minute and look at your complete layout so far. 





<?xml version="l.0 〃 encoding= 〃 utf-8〃？> 
<RelativeLayout 


xmlns : android= 〃 http://schemas.android.com/apk/res/android' 
android : layout—width=”fill 一 parent” 
android : layout—height= 〃 fill—parent〃> 

<TextView android : id =,, @ + id/contact name" 


4 ^ —一 Rcla*tivcLayou*t 
dc^la\ra*tio^. 


android : text= 〃 Sam 〃 

android : layout—width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap—content” 
android : layout_alignParentTop= 〃 true 〃 
android : layout—alignParentLeft= 〃 true 〃 
android : layout_marginLeft= 〃 20dp 〃 
android : layout_marginTop= 〃 20dp 〃 
android : textsize= 〃 20dp 〃 



Co 灼 *ta 匕七 

Tcx.*t\/icv/ positioned 
b> the *top side 

of sdvee 灼 


/> 

<TextView android: id=’’@ + id/contact_phone" __ 

android : layout—width= 〃 wrap—content” 
android : layout—height= 〃 wrap_content 〃 
android : textsize= 〃 10dp 〃 
android : text= 〃 ll1-222-3333 〃 


The r^umbev- 

U\/icy/ dcdla\ra*tio^. Ri^h*t 
ur\dc\r Coy\{^c{, 

U\/iev/ aliped b> 

Irf 七 *to matdh Coy\{^t{, 
hov-izo^-tal position. 


android : layout_below= 〃 @+id/contact—name" 


android : layout—alignLeft= 〃 @+id/contact— name 〃 

android : layout marginTop= 〃 5dp 〃 \ 

/> \ 


</RelativeLayout> 


The atbribu 七 e -this 

U\/iew *fco 

hov-izo^*tal position 七 he 



main.xml 
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adding more views 



Tesr DriVq 


Now that you have both the contact name and phone number Views positioned in the layout, check and make sure 
your positioning worked correctly. But this time, instead of launching the app, just click on the Graphical Layout 
tab. Not only will you be able to see if your layout worked, but you can see graphical layout position and alignment 
indicators if you click on a View on the screen. 



TK*,S Imc 侃 view is 

aliped -to viow. 


The 

view is selected. 


Editing config: default 
3^in HVCA slider (ADP1) 


圓 Palelte 

▽ 

& Form Widcjicts 



lesdViuw 

Medium small 


Buicon 


〆 CheckBox 



Y Layout position 
pav-amc*tcv-s. 


* Radio Button 
Check&dTextViev^r 



% 

Tiic pheme \r\uw>bcv- View »s 
y \ o ^ pos'rtioncd 乙 


Cll Text Fields 
Q Layouts 

Cll CoiTiipositc 

Cll Images & Media 
Cll Time & Date 
Cll Trarsitiors 
Cll Advanced 
Custom & Library Views 


□ Graphical Layout [pj main.xml 


■ 
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relative layout 


Add the Update Contact buttow 


You’ve already positioned two Views 
on the screen and just three to go! 
With the Contact Name View and the 
Phone Number View added, it’s time 
to add the Update Contact Button. 


Ncx-t uf, *tV>c ufdaic 

bu*bto 灼 … 


Courts 匕七 




m 丨 l i ^ 



^harpen your pencil 


Below is the declaration of the update contact button. Position 
the Button below the phone number View and aligning to the 
left of the Contact Name View. Give it 10dp of vertical margin. 


<Button android:id= M @ + id/update_contact_button" 
android:layout_width="wrap_content" 
android:layout_height= M wrap_content" 
android:text="Update Contact" 
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testing the alignments 


%iharpen your pencil 

Solution 


Below is the declaration of the update contact button. You 
should have positioned the Button below the phone number 
View and aligned it to the left of the Contact Name View. Give it 
10 dp of vertical margin. 


<Button android : id="@ + id/update—contact，' 

android : layout—width= n wrap_content n 
android : layout—height= n wrap—content '， 
android:text="Update Contact" 

a^droi d : layou*t_.bcl d/ 

ar\dhroid:laYou*t_aliy\Lrf 七二”侈 


Mav^m *fcof is 
vcvtidal spate- 


ay\droid ： layou*t_mav-gm7op==- ,, lOdp w 


/> 


tWei^re no o 

Dumb Questions 


Why is the button aligned to the left of the contact name 
view and not the contact phone view? 

Either one would work. The reason is that the contact phone 
view i aligned to the left of the contact name view. So setting the 
button to align to the left of either the contact name or contact 
phone would both work. Sometimes it's better to have a single 
alignment view that is referenced by multiple views and other times 
is better to have the layout positioning and alignment refer to the 
save view. It's really up to you how you want to organize your 
layouts. 


What if I want to position a View relative to another View 
on the screen, but align with the parent? Can I mix and match 
like that? 

You sure can! Say you wanted to position the button below 
the phone number view but align it on the right side of the screen. 
You could use the layoutBelow attribute to position the button 
below, but use the layout—alignParentRight attribute 
to align it to the right side of the screen. Pretty slick! 
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relative layout 



Tesr DriVq 


It’s a good idea to test your layouts early and often, especially when you’re working with RelativeLayout! This way, 
you don’t go too far down a path if a View isn’t positioned correctly. 


Tiic butto 灼 is added *to 
*tKc viow, dy>d positioned 
•fco *tV>c bo*tV> 

七 he Coy>*t3d*t and 


y>umbcv* \/iC>w- 


X illl t 2：26 


Babe, I'm Cool. 


Sam 


111 - 222-3333 



Tkis is looking gfreat! 



Next up... Adding 
the contact portrait. 
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adding more views 


fretting ready to add the contact portrait 

Your ready to add the portrait 工 mage View to the 
screen. This ImageView is going to diaplay the avatar 
associated with the contact. You’re going need an image 
to use to position it and make sure it looks OK. 


For now. just set the background to an RGB color and 
give it a size in DPs. This way, you can layout the view 
on the screen and make sure it’s positioned correctly. 


Adjust the ImageView attributes below. Align it to the top 
of the Contact Name TextView and to the right hand side 
of the screen. Also, add 2 0 dp margin on the right to give the 
工 mageView a border between it and the right edge of the 
screen. 


^harpen your pencil 


〈ImageView android : id= 〃 @+id/contact—portrait” 
android : layout_width= 〃 50 dp 〃 

android : layout_height= 〃 50 dp 〃 Set the bddk^\rouhd "to 3 

android: background:"#aaa" ^ - - ^' 9 ^ so Y ou easily 

S CC it to position it. 

^：：：~^ …………………… 

ahd\roid ： adjus-tl/icwBouhds 
IS "to t\ruc so the 
image will adjust as needed- 
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relative layout 


Fireside Chats 

華華 


Tonight’s talk ： Is Relative Layout The New GridBagLayout? 


RelativeLayout: GridBagLayout: 

Shudder. I can’t believe I’m here with GridBagLayout. 

Talk about getting off on the wrong foot! What’s 
wrong with being here with me? 

For everyone out in the audience, GridBagLayout was 
the magical layout in Java’s Swing desktop UI Toolkit 
that was supposed to be able to layout your whole 
screen in one layout. 

Yup. That sounds about accurate. 

Sure, except that you are impossible to use! You have 
made countless developers cry. Seriously! 

Now wait a minute, that’s just unfair! It’s true I have 
a rather complex grid structure that my developers 
have to learn, then place each component in the 
right position in the grid... 

Exactly! See, I have no grid. You just position a 
component somewhere on the screen and position 
other components around it. Simple! 

You know, I don’t have to sit here and take this kind 
of badgering from you! 

I’m sorry! I didn’t mean to offend you. I just wanted 
to point out that although we both can layout very 
complex sets of components we do so very differently. 

I use relative positioning to create very complex 
layouts... 

Right, and I use a grid. 

Exactly. But I’m just saying I’m waaaaaay easier to 
work with than you are. 

OK, sure. I do require a person willing to devote 
effort learning and working with me. 

Ha! There you have it. I’m easier to use! 

OK, you are easier to use. Are you happy now? 


Yes. Yes, I am. 
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adding another button 


You should have adjust the 工 mageView attributes below, 
aligning it to the top of the Contact Name TextView and to the 
right hand side of the screen. You should have also added a 2 0 dp 
margin on the right to give the 工 mageView a border between it 
and the right edge of the screen. 


<ImageView android:id= 〃 @+id/portrait 〃 
android : layout_width= 〃 50dp 〃 
android : layout—height= 〃 50dp 〃 
android : background= 〃 #aaa 〃 

android: adjustViewBounds=’’true” the view {x> 

_ the -top \right o-f 

ahdvoid : layou*t_ar^Pa\rerrtR4lvt 二 "*brue" e 

ahdroid^ayou-t^ali^^Top^^+idi/dor\*tad*t — 

今 We a little 

sfate oy \ 夕 ahdvoidhlayou 七一吵七二 "2»0 却 ” 

■tiic v—t . 

/> 


i^harpen your pencil 


TV)C lc*f*b 

.mdV'^ms 


3 G llll 

Babe, I'm Cool. 


4 >Sam 


111 - 222-3333 



The /magcl/icw -fov- -the 
po^aii ls a|i 3hCC j wi + h 

the ioy of the Co^iati 

and "to ihe 
o*p "the s^vcch. 
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relative layout 


Time to add the Tm Cool" button 


OK, you’ve only got one more View to add to the 
screen... the big I’m Cool Button. 



How would you position the I’m Cool button? 
What component would you align it with? 
How are you going to position it? 
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detailed positioning 


Positiowiwg the Tm Cool" buttow 

Did you think about how you could position the 
I’m Cool button? What did you come up with? One 
option you may have come up with is adding the 
button under the Update Contact and giving a little 
margin to the left. 


Position *l*t 

update 
Coy\{^cA, bu*t*tor\- 




Phohe number 


Update Corrta 匕七 


笨 



Cc^-tcv- i\\t button 
ho\rizxm*tallY. 



<Button android:id= 〃 @+id/im_cool 〃 

android : layout_width= 〃 wrap_content 〃 
android : layout_height= 〃 wrap—content” 
android:text= 〃工 , m Cool!” 


android : layout_centerHorizontal= 〃 true 〃 
android : layout_below= 〃 @+id/update 一 contact” 

/> 




main.xml 
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relative layout 


Always thiwk about resizing 

The truth is, new Android deveices are coming out all 
the time with different screen sizes. Your best bet is 
think ahead and try and plan for as many screen sizes 
as possible. If you position the I’m Cool button some 
distance below the Update contact button, it may look 
good on some screens that your testing on. But with if 
the screen is really long? It’ll be pinned to the top! 


Courts 匕七 hdrmC 


Phor\C humbcv* 


Update Cor\*tad*t 


笨 


So what caw I do? 


There is another useful positioning element you can 
use to center the view in the parent- both vertically and 
horizontally. If you use that positioned element for the 
I’m Cool button, it would look ok on the smaller screen 
on the left AND the long screen on the right! 


Ko*t vcv-t^ally 

ten-tev-edi. Too 



I’m Cool I 



<Button android:id= 〃 @+id/im_cool 〃 

android : layout_width= 〃 wrap_content 〃 
android : layout_height= 〃 wrap_content 〃 


android:text= 〃工 'm Cool! 



V\^ v^tidally ma in.xml 

Kovizjo^^lly 


You’re done! Now let’s take a look at the completed layout. 
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layout comparison 



Tqst DriVQ 


All of the Views are laid out on the screen and (hopefully) 
positioned properly. Run the app in the emulator and make 
sure everything is where you expect it. 


and updat 
bu*t*to^ all lc-P*t 
、ed *thc 
the 


•tof <^f 


Oy\C butfcoh v-iglit 

the middle o( 
sdv-cch -fco sehd 
a -fco -the 



It looks Great! 


Po\rt\rai-t up ov\ 

七 he -top vighi o( 

ihc sdv-cch. 


o 



You may have noticed the I’m Cool butt is a little small. 

The button is a little small now ， you’ll be fixing that in Chapter 12. 
There, you’ll learn some advanced graphics techniques and make 
this button a large graphic. 
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relative layout 


Comparing the layouts 

With the screen layout all finished using 
RelativeLayout, let’s go back and compare 
the tree of the nested Li near Layouts with 
the new and improved RelativeLayout. 


before 


After 



Relative 

Layout 


Rcplad'mj the v-oot L'mcav-Layout 



v/CV-C all v-emoved. 


Phone 

Label 


Update 

Contact 

Button 


Kow you have 
just oy\c layout 
-rov the whole 
sdrccJ 



Phone 

Label 


Update 

Contact 

Button 


Image 

View 


I’m Cool 
View 


Not only is everything laid out correctly... 
but it’s all done with one layout. 
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Og Piste - 

You're quickly becoming a RealativeLayout master by the end of this chapter. If you’re 
ready for more, here are a few pointers to more information on RealativeLayout and 
other cool layouts. 


RclatWcLaYou-t dots 

-to wt 切 : //develo?ev.a”dvo»d. 

RclatwcLaYou-t dodumc^-tatio^. 


0{\\tr layouts 

RclativcLayout 七 the ohly 
layout rwahagcv ov\ -tKc blodk. 6fo 
io http://dcvclofc\r.ahd\roid dom/ 
guide/topids/ui/layou*t-objcd*U. 
h*tml -Po\r a <^uidk look at o*tKcv 
layouts hot dovc\rcd heve, ihdudihg 
Fva^cLayou*t a^d TablcLayou*t- 


iVri 七 e youv ovm layout 

Layouts av-c r\o*t bits of dodc 

passed doym ih *thc £P^) i-f youVc 
dom^ special you dar\ y/\ri*tc 

r ovm! out the dodumcr\*ta*tior\ 

■the 今 voup abs*tvad*t ^lass 

(h*btp://dcvclopcvar\dvoiddom/ 
Yt^trtr\tt/ android/ viewVi^w 今 vouf. 

-fov* *m-fo\rma*tioh or\ y/\ritm^ you\r 
oy/h layou*ts. 
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relative layout 



Your Android Toolbox 

You just laid out your first screen 
with RelativeLayout. Let’s take a 
look at what you’ve learned. 


RclatWcLaYou-b fv-otcss 

I. /\dd adored v*»cv/ aliped 糾衽 
i\\t 

Add more views relative ^ 

viev/s added 


% 


Z. 


/\ad more adored views ad viev/s 

rclatWc bo views as Y\tttdtd 


今 . «*msc a^d ^tail 




BULLET POINTS 


■ Too many nested LinearLayout can slow 
down your application performance. 

■ Use RelativeLayout to optimize deeply 
nested LinearLayouts. 

■ Align views to the parent positions 
using alignParentBotton, 
alignParentTop, 
alignParentRight, and 
alignParentLeft. 

■ Layout Views relative to other on screen 
views using layout_above, 
layout—below, layout_ 
toRightOf, and layout— 
toLeftOf. 


■ 


Align Views relative to other on screen 
views using layout_alignTop, 
layout_alignRight, 
layout—aligntLeft, layout_ 
aligntBaseline, and layout 
alignBottom. 
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11 content providers 



One of the greatest things about Android is how well 
applications can work together. So far, you’ve built an apps that access 
content on the Web (like the NASA Daily Image app) and apps that generate their own 
content (like the TimeTracker app). But sometimes you need to access your users content 
on their device to make the app fit seamlessly into their user experience. Luckily, Android 
makes that super easy for you! In this chapter, you’ll learn how to select contacts using 
contact selection built into the OS. You’ll also learn how to query contacts stored on the 
device and a few different details about them. 


this is a new chapter 
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something is missing 


Your app has a big problem at the moment. 


it doesn't actua 


lly w 


Vet' 



The app is looking good, but now 
I want it to be able to use it! Sam 
and I are heading out for a little 


bit. Check back with you later. 


He’s got a point, you know. 

You just finished laying out all of the views, 
but that still won’t allow Sam or Scott to send 
messages to each other. Let’s get the guts 
of the app built out and get Sam and Scott 
messaging each by the time they get back. 
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content providers 


Here's what youYc going to do 


Sure, you have some work to do. The app doesn’t have the 
functionality you need yet, but you laid the groundwork 
with the layout you built in the last chapter. Here is what 
you’re going to do in this chapter to make the app work. 



Select a contact 

Pressing the update contact button 
should show a screen allowing your 
users to select a contact from the 
phone. This way, your users won’t 
have to enter contact information 
multiple times. 



Update the display 

After the contact is selected, the 
contact display (the contact name, 
phone number and photo) should 
update to display the selected 
contact’s information. 



Send a text message 

This is the real user goal of the 
application. Once the contact is 
selected, your users should be able 
to press one button and have a text 
message automatically sent to their 
selected contact. 


gtr\i -to 
Saw’s 一 emc 



Sclct 七 a 
d.oy\*ta^*b 



Sam 



jr 


updated -to display 

s clcdcd 6ov\isci. 


f[\A{jo^tv\craicd 

七 c % 七 message- 
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making the contact clear 


Make it clear that wo contact is selected 

When you first launch the app, no contact is selected. In 
the last chapter, you designed and constructed the user 
interface with some temporary contact information. But 
now that you’re making the app work, start by making it 
clear that no contact is selected when it launches. 

Start by adding a new method called render Con tact 
and call it from onCreate. Right now this method will 
just display a message to select a contact. Later, it will 
display the contact you’ve selected. 


public class 工 mCool extends Activity { 


public void onCreate(Bundle savedlnstance) 
super.onCreate(savedlnstance); 
setContentView(R.layout.main) 

renderContact(); 


private void renderContact() 



Adda r^dtrCo^ciO 
.ailed 

i\s\s IS \ust v>0 

⑽ ag W 七 cv C y,Wl7 tw.s W.II 

d\sf lay 七 Wc b 祕 


d'»splaY v'icy/s. 


Display a message 
view BY\d 
bldr\k ou*t vest 


TextView contactNameView = 

(TextView) findViewByld(R•id•contact_name); 
TextView contactPhoneView = 

(TextView) findViewByld(R.id.contact—phone); 

工 mageView photoView = 

( 工 mageView)findViewByld(R.id.contact_photo); 

contactNameView.setText( n Select a contact") 
contactPhoneView.setText( nn ); 
photoView. setlmageBitmap (null); 


elass Feo {I 

£j 

ImCool.java 
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content providers 



Tost DriVq 


Run the app now and verify that the “Select a contact” text appears in the contact name View. 


wtaW 七作七 a\splaym 3 m 

Ac dis^laYNawc 心 eld. 


Tke rentier contact 
ckangfe looks gooct! 



Now let’s get started selecting a contact •“ 
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selecting a contact 


How do I select a contact? 

You’re ready to select a contact now. You could have 
them enter their contact’s name and phone number 
and select a picture to make the app work. But they’ve 
already entered that information into their phone, 
in their contact list. So just let your users select a contact 
from their contact list and you’ll save them a lot of boring 
data entry, and leave your app focused on the cool stuff. 

But how should you build a contact list selecting screen? 

You could build a screen that loads and 
displays contacts stored ow the phone... 


Here is what the flow would look like if you built your own contact 
screen. When you press update contact, you’d go to your new 
screen and back to the main screen after you selected a contact. 


A 屮 



® 8:01 



Babe, I'm Cool. 


Select a contact 


編 IB 







Bu\ia tWis sawto d • 外 lay 
i\^t tcmla 出扣 d allow a 
uscv *bo sclct*b otic.' 



This seems complicated! 

Could there be something easier? 
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七七私 c s-bov-cd 


ov\ device. 


I 





Rctu\rh -the usev bd^k -to -the 


令 $ ■ S 8:36 pm 


Babe, I'm Cool. 


Sam 


555 - 867-5309 















content providers 



Wouldn t it be dreamy if I could just 
show the native dialog allowing users 
to select contacts on the phone the 
same way they make calls. But I know 
it's just a fantasy... 
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native contact selection 


Vov\ J i custom build... 

Android already has behavior built in to select contacts. 
This is used to select contacts for phone calls and other 
native apps. But it can also be used by apps like yours 
so you don’t have top build it yourself. 

... use the native contact select screen 

Using the native contact selection screen will keep the 
same flow, but you won’t have to build it yourself. 


A 冷 ' 


Babe, I'm Cool. 

Select a contact 



tS 8:01 pm 



updaic Cov\iad lau^hes 
■the native election 




通 Select contact 




从七 cr a usev 

vt *takc 於 batk *to i\\t 



tJiereiqr 

Dumb 


e no o 

Questions 


Why is it better to use the native contact selection? 

First of all you don’t have to build it! But more importantly, 
it guarantees your users experience is the same as the native 
experience. If there is a modified version of the contact selection on 
your users’ devices, they’ll see whatever is native when you invoke 
the selection request. Also, if the native contact selection changes 
over time, you’ll get whatever the latest behavior is automatically. If 
you built it yourself, it might look different than what your users are 
expecting. 


OK，I get that. But what if I really want to make a custom 
replacement for native behavior in my app? 

You could do that too. You could query the contact store 
directly and build a custom screen or component displaying the 
content and allowing your users to select contacts that way. But this 
chapter is going to focus on using the native selection. 
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content providers 


Invoking the contact scrcew 

OK, so it looks like the built in contact selection is the 
way to go. But how do you invoke it from the app? 


You can use Intents 


Intents are a generic mechanism for invoking an action 
that the system can respond to. When you built the 
screen navigation in the TimeTracker app, you specified 
the Activity you wanted to invoke in the Intent. When 
the Android action code processed that Intent, it saw the 
reference to the Activity and invoked it directly. 



actual M 七 I 吻 . 


T\\t attiow to&t 

pv-otcsscs 七 he m 七 




Activity: MyActivity 



/W starts 


MyActivity 




Put you can be WAY more abstract thaw that. 

You don’t actually have to include a reference to an 
Activity in an Intent. You can also supply a Uri or a 
combination of Uri and an Action. And if you invoke the 
Intent, the Android action code looks for an Activity that 
responds to that Uri and invokes it. 




and A^ow. 



Uri: Contacts 
Action: Pick 


The a^iior) toAt 
Passes the 



/Wdl starts 七 ^ 

selection. 


Contact 

Selection 
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creating the intent 


Select the URL and Action 

You can find extensive documentation for the Uris 
and Actions you can pass into an Intent in the Intent’s 
online documentation. Go to http : / / developer . 
android.com/reference/android/content/ 
工 ntent • html to take a closer look. 



a moo 


鐮 c English 


卜 d.CGf 


developers 


search developer docs 


Search 


Home 


SDK 


Dev Guide 


Reference 


Resources 


Videos 


Blog 


□ Fitter bv API Level: 


•卜 ■卜 ， 


android.app.a_n 
a nd raid .a pp. backup 
android.appwidget 
and raid, bluetooth 


androtdxontent 


android.content.pnn 
and raid .eo ntent. res 
and raid .data base 
android .data base .sqlite 
android.drm 
and raid .gesture 
android.graphics 
android .graph ics.d rawable 
android .graph ies.d rawable .shape ； 


oomtj trxdrnpitrs u\ d.uLUjri.'UtiLcL ptiirs d.r«. 


action vl Ew content://contacts/people/1 - Display information about the person whose 
identifierls 'T- 


m. 




iQii plja^t^ntent://contacts/pe<>pfe/1 -- Display the phone dialer with the person 

AC^iOM vi ew tet:i23 - Display the phone dialer with, the given number filled in. Note how the 
VIEW action does what what is considered the most reasonable thing for a particular URL 

act i qm dial tet:123 - Display the phone dialer with the given number filled in. 

a€^iom edit content://contacls/people/1 - Edit information about the person whose identifier 
is ^r. 

A€l!iO n vi EviJ)Gntent://contacts/people/ - Display a list of people, which the user can browse 
TiTromri7 i iT_s example is a typical top-level entry into the Contacts application, showing you the 
list /flp&ople. Selecting a particular person to view would result in a new intent { ACf ION Vlisw 


ew wol 

conti\nt://contacts/N J being used to start an activity to display that person. 


Usm^ tw»s a 此 o'7 ou 


Wsih 9 ^ is you 
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content providers 


Creating m Iwtcwt 


You need to create an Intent to select a contact from the contact 
list. You can create this Intent using the constructor that takes an 
Action and Uri. 


attwi-ty mvokc- 

Intent( String action, Uri 


The u\ri 
the daia -Pov- 
the dd'tioh- 

/ 

uri ); 


The Uri is a reference to data on the device, while the Action says 
what to do with the data. So you’ll pass in the 工 ntent • ACTION_ 
PICK constant. But what about the Uri? 

Uris are actually human readable descriptions of where to find the 
data. The Uri to find all of the contacts in the phone’s contact list is 
content :// com.android.contacts/contacts. 

But to make the types work with the constructor, you need to convert 
the string in a Uri object which you can do using Uri . parse. 


Uri contactUri = Uri.parse( 

''content: //com.android. contacts/contacts 〃 



Hrm. You have a constant 
for the action but not the 
Uri. You sure there's not a 
constant for that too? 


Is it a good idea to use a 
String to create the Uri or is 
there a constant you can use. 


Let’s take a look... 
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using constants 


Use constants when you can 

The Uri created by parsing the string will work, but raw 
strings are just a hassle to keep in your codebase. The 
format could change in the future or you could just have 
a typo in your code that the compiler wouldn’t catch. 
Always best to use constants if you can. And there is just 
such a constant you can use. 


Take a look at ContactsContract.Contacts 




ContactsContract.Contacts 


© developer.android.com/reference/android/provider/ContactsContract.Contacts". ☆ 


GOD^OO 


0 English 


developers 


Home 


SDK 


Dev Guide 


SG3rch 


Resources Videos 


.doc 


Blog 


Search 3 

□ Filter by API Levei:! 13 i ' 




android.opengl 

android.os 

android.os.storage 

android.preference 


android.provider 


android.renderscript 

android.sax 

android.se rvice.wallpaper 

android.speech 

android.speech.tts 

android.telephony 

android.telephony.cdma 

android.telephony.gsm 

android.test 

.~^rr 





public static final Uri 

CONTENT 一 STREQUENT 一 URI 

The content:// style URI for this 
table joined with useful data from 
Contactscontract.Data, 
filtered to include only starred 
contacts and the most frequently 
contacted contacts. 

public static final Uri 

CONTENT JJRI 

The contents / style URI for this 
table 

public static final Uri 

CONTENT 一 VCARD_URI 

Base uri for referencing a single 
contacts entry, created by 
appending lookup_key using 
withAppendedPath(uri, 

String). 


I 


j dCi.LrUiiLd^i^>.Ayy 

ContactsContract.Contacts.Data 
ContactsContract.Contacts.Entity 
ContactsContractContacts.Photo 
ContactsContract.Data 
ContactsContract.Directory 
ContactsContractGroups 
ContactsContractlntents 


Public Methods 

static Uri 

getLookupUri (ContentResolver resolver, Uri contactUri) 

Builds a content_lookup_uri style uri describing the requested 

Contacts entry. 

static Uri 

getLookupUri (long contactld, String lookupKey) 

Build a content_lookup_uri lookup uri using the given _id and 

LOOKUP-KEY. 


I Tree Navigation 


^ct ready to invoke the new Intent 

You could launch the new Activity by calling 
start Activity,. But in this case, you want to have 
the selected contact returned after the contact selection 
is complete. That’s OK though, you can just use 
start Activity For Re suit just like when you built 
your own screens. 
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Contact Selection Intent Magnets 

Below is the code for onUpdate Con tact and onActivityResult. Complete 
startActivityForResult by creating an Intent and passing in the Action and Uri. 
In onActivityResult, print the returned Intent to the Log to see what comes back. 



Add a toY\siav\i for a request -type 

private static final int PICK—CONTACT—REQUEST = 0;^— passed *fco stav-tA^t^'tyFov-Rcsul-t av\d 

vevi-fied oy \ v*c*tu\nr> oy \ o^A^WityRcsult 




public void onUpdateContact(View view) { 


startActivityForResult( 


Cv*ca*tc 七 he m 七伙七 

冬 _ 〆 heve v/'rth *thc 

ad*tior> and Uvi. 



PICK_CONTACT_REQUEST 



protected void onActivityResult(int requestCode, int resultCode, Intent intent) { 
if (requestCode == PICK—CONTACT—REQUEST) { 
if (resultCode == RESULT_OK) { 

_Pvm*t a message ou*t 

七 he vc*tuv*r>cd’m 七 Orrt *to 105. 




ImCool.java 
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invoke the intent 



Contact Selection Intent Magnets Solution 

Below is the code for onUpdateContact and onActivityResult. You 

should have completed startActivityForResult by creating an Intent 
and passing in the Action and Uri. In onActivityResult, you should have 
printed the returned Intent to the Log to see what comes back. 



public void onUpdateContact(View view) 
startActivityForResult( 


|y\s*tayrbia 七 c a 

| 灼七伙七 . 



Intent.ACTION PICK 




Pass m ihc atiio^ 
pidk a tov\iaci. 

!□ 


PICK CONTACT REQUEST 



protected void onActivityResult(int requestCode, int resultCode, Intent intent) { 
if (requestCode == PICK_CONTACT—REQUEST) { 
if (resultCode == RESULT_OK) { 


^LogN^TSele^^n^^^tent^^^^in^OJ^J 

i Pv’m 七 *to 

^ lo^ so you dan sec 

} what’s passed baek. 
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fretting ready to test contact selection 


The contact selection code is all ready to go, but there are 
a couple of things to update in your project before you 
run it. First you need to add the onClick property to 
the Update Contact button on the screen to invoke the 
onUpdateContact method. 






<Button android : id= M @ + id/update_contact" 

android : layout—width= n wrap—content" 
android : layout_height= M wrap_content" 
android:text="Update Contact" 
android : layout_below="@+id/contact_phone" 
android : layout—alignLeft= n @ + id/contact—name" 
android : layout_marginTop= M 10dp M 


android:onClick="onUpdateContact , 


/> 


Add Ohdi^k p\ropc\rty foihtihj {o the 
ohUpyou jus*t w\ro-tc- 




main.xml 


Now add the READ_CONTACTS permission to your 
AndroidManif est. xml file. Without it, you’ll get an 
error when you try and access the contacts in your app. After 
all, a users contacts are sensitive information so you need to 
ask and they need to give you permission. This should also 
clue you in to being really sensitive to what you do 
with that access. 




</application 〉 

<uses-sdk android:minSdkVersion= M 10 M android:targetSdkVersion= M 10 M / > 


<uses-permission android:name="android.permission.READ CONTACTS"/> 


</manifest> 




Pcv*missior> *to addess 
dor>*tad*U s*to\rcd or> *tKc dcvidc- 




AndroidManifest.xml 
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testing contact selection 



Tesr DriVq 


Now that the Intent is created and being started, you should see the contact lost display when you press the Update 
Contact button. Go ahead and run the app and check to make sure it’s working. 




\、丨 （ 

CUcW 


You don’t have any contacts in your setup in the emulator. 

The reason you’re seeing this screen is because the app is running in an emulator 
that doesn’t have any contacts configured. You have a few options here. You 
could create the contacts on the phone, but we also want to test images and 
images are hard to test on the phone. And you’ll want to test the text message 
sending anyway which you can’t do from the emulator. 


arc〆 七 a” 
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Rim the app ov\ a device 

Plug in your Android device using USB and remember to turn on the 
option to allow non-market apps. Then just run the app again from 
Eclipse and select your hardware device. 

Now that you’re running the app on your device, when you go to the 
Contact Selection screen, you should see a populated list of contacts. 
Click on a contact and you’ll be taken back to the home screen. 






Sometimes it’s test 
to test your app on 
a karctware device. 



Excellent, there are some contacts! 

And when you select one, you’re taken back to the 
home screen of your app. 
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next steps 



Definitely! Displaying the sected 
contact is next on the list. 

Now that the contact is being selected, it’s time 
to display that contact on the home screen. To 
get this working, you’ll need to get a reference 
to the contact that was selected, retrieve the 
display name, phone number and photo for 
that contact and display it on the screen. 


Looking good so far. I like that selecting 
a contact looks like my other apps. Now 
youre going to display the details, right? 
This way, I’ll know Ive selected Scott so I 
know rm texting the right person.. 
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Start by looking at whafs coming back 


You’re already getting the contact back to the ImCool 
Activity in onActivityResult. You also put a log 
statement in there to see what the returned Intent 


contains for its data. Take a quick look at the log and 
see what came back. You should see one line that looks 
something like this: 


Lo^Ca*t 

pv*m*tou*t 


08-10 15:44:52.131: DEBUG/Intent Data(355) : 
lookup/0rl-512D45/l 



TWis sbr\^ 

toy\iati sclctticm. 

寸 - 

content : //com.android.contacts/contacts/ 
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contact URIs 


What is that string refcrcwcmg? 


If you’re thinking that the string printing out in the 
logs looks kind of like some kind of a local web address, 
you’re not too far off. It’s actually a URI, or Uniform 
Resource Identifier which is a string that locates a 
specific resource. The different between the URI here 
and a web URL is that the URI here is an address for a 
local resource. In this case, the URI is a reference to the 
selected contact 


f{thoY\ *to 

OY\ the 




TiiC Uvi povtio^ 

*to dor>*tad*b 




Lookup the 

scl^-tcd c,oy\iaci. 



content : //com.android.contacts/contacts/lookup/0rl-512D45/l 


L^s-t khoy/h posi-tioh 
-Po\r selected Cov\iad (a 
op-tirwiia-tioh). 



OK, so this points to a 
contact. But I doiVt want a 
reference to the contact, I 
want the actual contact! 


You can look up the contact using the URI 

This Uri doesn’t contain the real contact (which you need 
to get the name, phone number and photo to display on 
the home screen. But it does represent a direct lookup 
to that contact. 


O 
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Accessing the contact 

There is a contact data store built into every Android 
device. You can query the contact data store for specific 
contact information, like determining which contact 
has an associated phone number for building caller ID 
functionality, or in our case, just finding more properties 
for a contact that you already know about. 

There is a utility class called Content Resolver that 
you can use to query the contacts. Using this Uri and 
a query to the Content Resol ve r , you can get to 
the raw contact! Then using what you learned when you 
iterated through database results, you’ll iterate through 
the contact result Cursor it returns. 


❻ 


A query is sent to 
the ContentResolver 


o Your app 

needs to 
query contact 
information. 




o The ContentResolver 
processes the query 
and returns a result 
cursor from the 
contact store on 
the device. 



o 


The query returns 
a Cursor, just 
like the Cursor 
returned when you 
query a database. 





The contact store. 
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using the uri 


Update the code to use a URI 

The render Con tact method is currently hard coded 
to display the no contact selected state. But you’re 
about to start populating the selected contact, so let’s 
make it clear when there is and when there is not a 
selected contact. Then you can start filling in the code 
when a contact is selected. 

Update the render Con tact method to pass in the Uri. 
If the Uri is null (meaning no contact is selected) then set 
the name, phone, and photo view to display the no contact 
selected state you setup at the beginning of the chapter. 
Also update the onCreate to call render Con tact 
with a null Uri (since no Uri is selected) and from 
onActivityResult pass in the Uri. 





Update renderContact to take 
a Uri. If that Uri is null, display 
the no contact selected state with 
the message to select a contact. Also 
update onCreate to pass in a null 
Uri and onActivityResult to 
pass in the Uri from the Intent. 



^ Pass m the URI 

private void renderContact(Uri uri) { 



TextView contactNameView = (TextView) findViewByld(R.id.contact—name); 
TextView contactPhoneView = (TextView) findViewByld(R.id.contact 一 phone); 

工 mageView contactPhotoView = ( 工 mageView)findViewByld(R.id.contact—photo); 


Chcdk -fov* d v>ull URI- |-f 

if (uri == null) { 气 -theve must be y\o 


contactNameView. setText (''Select a contact"); 
contactPhoneView. setText (''〃）； 
contactPhotoView.setlmageBitmap(null); 

} else { 

contactNameView.setText(getDisplayName(uri)); 
contactPhoneView.setText(getMobileNmnber(uri)); 
contactPhotoView.setlmageBitmap(getPhoto(uri)); 


Create V^clfcv methods ^ov 
cacM data ^\t\A you 命七 
-to set oy\ *bV^c stvec”’ 



ImCool.java 
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Then pass in a null URI in onCreate (since there is no contact selected yet) 


public void onCreate(Bundle savedlnstance) { 

super.onCreate(savedlnstance); 
setContentView(R.layout.main); 

renderContact(null); 

Pass d v>ull Uv*i smdc 

y\o has bccir> selected yc*t 


And in onActivityResult, pass the URI to render Con tact. 


protected void onActivityResult(int requestCode, int resultCode, Intent intent) { 
if (requestCode == PICK—CONTACT—REQUEST) { 
if (resultCode == RESULT_OK) { 

renderContact(intent.getData()); 

Pass Uv'i ( 七 he ( vom 

oy\ {p v*cr>dcv*Coy>*tcld*t- 





Finally, create stub methods for the three display methods. You’ll be 
implementing these yourself! 


£*tub mc*tKod *fov 
vc*tvcW*m^ 七 he display 
values -fov* 3 torrtad 七 . 



This mC*thod Will V-C*tuVir> 
display 灼 ame (or *tV>c dovrtad 七 . 

private String getDisplayName (Uri uri) { return null; 

This will \rciuVh ihc MOBILE 
^ ^urwbc\r -Pov ihc 

private String ge'tMobileNuinber (Uri uri) { return null 

This bs 七 rweihod y/ill \re*tum 
the pho-to -Pov- 七 he 

private String getPhoto (Uri uri) { return null; } 


you are here ► 


443 













querying contact information 


Start with the display name 


With that bit of code reorganization, you now have 
three contact detail methods to implement and the 
contact display will be up and running. Let’s start with 
getDisplayName. 


Tiic detail 

atdess youVc 

*to 




So what does this method need to do? 


This method needs to retrieve the name of the contact. 
The display name is the name that displayed in the list 
of contacts that you selected. Scott selected Sam from 
his contact list, so this method should return “Sam” to 
display it on the home screen. This way Scott will know 
Sam is the selected contact that the app knows about. 

To get this to work, you’ll need to query the contact 
store and access the appropriate value in the Cursor. 


So, let’s get started! 


-Pv-orw -the 

list, jctDisplayNa rwC 
should V-c*tu\r^ Sdm -fv-orw 
the \rci\ricvcd as 

posi-tivc \rcm-PoV-dCmCht 
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Query the contacts 

Think of the contact store like a database. In fact think 
of the device having a big database with all of the 
content you can access on the phone and the contacts 
are inside there. You need a way to query that database 
though, and that’s done with the Content Resolver. 

You can retrieve the Content Resolver 
from your Activity using the Activity 
getContentResolver method. 


ContentResolver contentResolver 




getContentResolver() 

\ 



Then you can query the content provider passing in the 
Uri returned from the Contact selection screen. 


Us'm^ 5C*tCov\*tcr\*tRcsolvc\r 
nxti\\od bo vc*tvicvc i\\t 
dc-fault Cov\*tc^*tRcsolvcv. 


T\\t \re*tu 作 s a Cursor 

厂 just like a database <\ucvy. 


^uc\ry the 
Coh-tc^-t/^csolvcv. 




Cursor cur = getContentResolver().query( 
intent.getData, 
null, null, null, null 


Pass m dd'ta 

-fyorw 七⑼七 . 




The ContentResolver query return a Cusor, just 
like the cursor returned when you query a database. 

Now let’s see what content is in the Cursor. 
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iterating a contact cursor 


Cursor cowtcwts 

Just like the Cursor database queries return, this Cursor 
is made up of a number of rows and columns. No 
columns were specified in this query so all the columns 
came back. This is resource intensive and you’ll want to 
fix this. But for now, let’s get the iteration working and 
then once you know the columns you need, you can 
query just for those. 


How do you figure out what columns are coming back? 

There are a few ways you could figure this out- you 
could write some code to print out the data or use the 
debugger. But before you do any of that, take a look 
at the documentation for ContactsContract. 

Contact. This class has a number of constants for 
the columns returned from the query, including one for 
DISPLAY NAME which is what you’ll need to display 
in the contact name field. 


http :// developer.android.com/reference/android/provider/ContactsContract.Contacts.html 



Tk PISPUY— 
|V ( 綱 E 6 。⑽ layrt. 


G ContactsContract.Contacts X 

O developer.android.com/reference/android/providei7ContactsContract.Contacts.html ☆ 


o ® 


GDD^OID 


0 English ~t~) 


developers 


Home 


SDK 


Dev Guide 




android.opengl 
android.os 

android.preference' 


android.provider 


android.renderscript 

android.sax 


android.telephony 

android.telephony.gsr^ 
android.test - 



Resources 


Videos 


developer doc 


Blog 


f Search } 


门 


Fitter by API Level: 13 


►From interface android.provider.ContactsContract.ContactStatusColumns 




0 


ContactsContract.Con s 


Use Tree 


Navigation 


From interface android D_der.ContactsContract.ContactsColumns 

- : 

(Display 一 NAwi) 

The display name for the contact. 

String 

HAS_PHONE_NUMBER 

An indicator of whether this contact has at least one phone number. 

String 

IN_VISIBLE_GROUP 

Lookup value that reflects the group_visible state of any 
ContactsContract .commonDataKinds .GroupMembership for this 
contact. 

String 

LOOKUP 一 KEY 

An opaque value that contains hints on howto find the contact if its row 
id changed as a result of a sync or aggregation. 

String 

PHOTOJD 

Reference to the row in the data table holding the photo. 

String 

PHOTO 一 THUMBNAIL_URI 

A URI that can be used to retrieve a thumbnail of the contact's photo. 

String 

PHOTO 一 URI 

A URI that can be used to retrieve the contact's full-size photo. 


Fields 

public static final Uri CONTENT_FILTER_URI 


The content^/ style URI used for "type-to-filter" 
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arpen your pencil 


Below is the updated renderContact method being passed in a Uri. If the 
Uri is not null, write the code to retrieve and set the display name on screen. 
To do this, you’ll need to query the ContentResolver using the Uri 
passed in to renderContact. Then iterate through the cursor and retrieve 
the display name using constants. Remember, the Contacts Contract. 
Contact. DISPLAY_NAME is a String. So retrieve the column index using 
the constant and retrieve the value. Also remember to use safe Cursor 
iteration and to close the Cursor when you’re done. 


private String getDisplayName(Uri uri) { 


String displayName = null; 


d ： - - -the itcv-atc the duv-sov, 



ar\d sci 七 he value -fov 七 lie 
display oy\ 七 he stvccv>- 


return displayName; 
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showing the display name 


— i^^irpen your pencil 


Below is the updated renderContact method being passed in a Uri. 
If the Uri is not null, write the code to retrieve and set the display name 
on screen. To do this, you’ll need to query the ContentResolver 
using the Uri passed in to renderContact. Then iterate through the 
cursor and retrieve the display name using constants. Remember, the 
ContactsContract.Contact.DISPLAY_NAME is a String. So 
retrieve the column index using the constant and retrieve the value. 

Also remember to use safe Cursor iteration and to close the Cursor 
when you’re done. 


private String getDisplayName(Uri uri) { 

String displayName = null; 


*tv>c dor>*tad*ts 

*tV>c uv*i passed Use 


^c*tCov>*tcir>*tRcsolvcv- *to 
vc*tvicvc 3 Coy>*tcr>*tRcsolvcv*. 


i-f (du\rso\r mr\ovc7oPi\rstO) { 


七 he value 

duvsov, bu*t 
dolunrm usm^ 

display do 朽 starrt. 


Cursor dursor 二 ytCoh*tch*tRcsolvcv().(u\ri, hull, hull, null, hull )； 

Move *to -f iv-st v-oy/ of 七 he 
tuvsov (*tV>cv-c should o^ly be oy \ c ) 

displayName =■ dursor.ge-tS-trm^ 

doh*tad*tCu\rso\r.ytColumh|hdc%^ 

Corrta^tsCorrbrWt. Coh*tad*UD|SP 

) 


} 

du\rso\rdloscO ； 


return displayName; 
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Tqst DriVQ 


Run the app now and select a contact. The display name should be updated. 



^ / i 

Sam / CVi C ^ # ^ [ 


T ' 1 

1 Tom 



T\st ㈣ 

灼 awe undated 


After selecting a contact and 
going back to the main screen ， 
the display name is populated 
with the selected contact. 


Looing gfOOct! 
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navigating contact data 


Pisplay the phone number wext 

You’ve got the name displaying on the contact 
display on the main screen. This means you’re 
successfully selecting a contact, getting the 
selected contact back and retrieving data values 
from that contact by querying the contact store. 

Whew! 

Now you need to display the phone number and 
photo to complete the contact display. 


TV\C 乙七 is 
-^vow *tV>c 

selected 乙七 . 


A 劣 




丁 he phohc humbev* 

"to be set. 




TVic piio*bo still 

needs bo be set 


So what about these other fields? 
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This should be super 
easy, right? Just need 
to get a few more values 
from the cursor? 


V 


Actually, retrieving the phone and picture 
are going to take a little more work... 

Phone contacts can be a bit tricky. You can have 
multiple phone numbers (think home, mobile, office, 
etc), multiple addresses, etc. To handle this, contacts are 
actually implemented as separate rows. One row handles 
the main information for the contact (like the display 
name), and then there are multiple detail rows for the 
contact. 



Ma'm 6cm 七 36 七 

like 

^ diis^laY 一 e. 


Multiple detailed \rows o*f 
乙 This 
ihdludes multiple phohe 

addresses, email 
addresses, tit- 



turn the page to see how access 
the detail contact rows? 
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querying contact details 


Accessing contact mfo details 

The general contact info row has some, but not 
all, of the information you need. This is pretty 
standard when you’re working with the device 
contacts. The general row is about enough to 
make a list of contacts but that’s it! 


The do 灼七⑼七 *fo\r 七 he ^\\OY\t y>umbcvs 
*m i\\t detail -table- I*t V>as 

a mix of all kmds o-f 

y>ur»\bcV"S -foV* mu liiflc dor^iadts. 



Thcv-c av-c LOTS move 

dolum 扒 s cr>d hcv-c •• 


So how to get these detail rows? 

The detail rows are also stored in the contact 
store and you can access them using another 
query to the Content Provider. The 
ContactsContract. CommonDataKinds class 
contains a number of constants for working 
with these detailed rows. One in particular, 
ContactsContract.CommonDataKinds.Phone. 
CONTENT URI ， allows you to query just the phone 
numbers. All you need to do is pass in the Uri to 
the query method and you’ll only get back phone 
numbers. 
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Implement getMobilePhone 

Let’s put this all in context and implement the 
getMobilePhone method. This method needs 
to query the contact details for the mobile phone 
associated with the selected contact. It will query the 
contact store using the Uri from ContactsContract. 
CommonDataKinds referencing the phone content. 

Here is the method. 


private String getMobilePhone (Uri uri) { Pass \y\ 

String phoneNumber = null; C" 

^umbcv-s. 

Cursor phoneCursor = getContentResolver().query( 

V/ 

ContactsContract . CommonDataKinds . Phone . CONTENT 一 URI, 

new String[] { ContactsContract.CommonDataKinds.Phone.NUMBER } 

null, 


null 

null 


Sc*t p\rojcd*tior\ 

*to the 



if (phoneCursor.moveToFirst()) { 

各 ， & phoneNumber = phoneCursor•getString(phoneCursor•getColumnlndex( 

phone number- ContactsContract.CommonDataKinds.Phone.NUMBER) 

)； 

} 「 Close duVSOV". 

phoneCursor.close(); 


return phoneNumber; 


Rc*tu\r^ 




Something really important is missing from this method. Can you 
spot it? (Hint: Look closely at the Uri passed in to getMobilePhone) 


ImCool.java 
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refining the query 


Pe selective with your contact query 

If you used the getMobilePhone method as is 
in your app, you’ll most likely get a phone number 
associated with a different contact than the contact 
selected. That doesn’t make for a very good method! 

The reason for this is that the ContactsContract. 
CommonDataKinds.Phone.CONTENT—UR 工 used 
in the query refers to all phone records and you need to 
specify the contact you want. 


You can refine results by adding a select value 


There are additional parameters you can add to the 
query call that refine the results you’ll get back. One of 
these is a String selection parameter. It acts like a SQL 
WHERE clause in the underlying query to the contacts. 
And just like a SQL WHERE clause, you can include 
?’s in the select String. Using another constant from 
the ContactsContract, your select parameter will 
look like this. 


CoY\{^c{^CoY\brBCi 
dlass allows you *to 


<1 

ContactsContract.CommonDataKinds.Phone.CONTACT ID + n 


With this select parameter, you also need to pass in an 
array of selection argument. These selection arguments 
will replace the ?’s in the select string when the query is 
executed. 


new String[] { 


This is *to be IP 
-fov* 七 he doy>*t3£.*t- 


This is *tV>c IP *fo\r 


*tV>c doy>*tad*t you 
( *to sclcdt 

id } 


The only issue now is that you don’t have a reference 
to the contact ID in the getMobile Phone method. 

But don’t worry, you can query that too! 
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Select just the numbers for your contact 

Let’s update getMobilePhone now. It needs first query the 
contact store to retrieve the ID of the selected contact based 
on the selected contact Uri. Then use that ID and pass it in 
through the selection arguments in the second query. 


private String getMobilePhone(Uri uri) 
String phoneNumber = null; 


Pass'm^ \v\ a 

o( -the 

匕 ID. This 
will \rciu\rr> only 

IDs 


This *pi\rs 七 
^uCV-y IrC'bricv/CS 
"the md'm 

匕七 \row, 

扣 d -fv-orw -that 
\row you ddir) 

v-ct\rcivc 七 he ID. 


Cursor contactCursor = getContentResolver().query( 

uri, new String[]{ContactsContract.Contacts._ID}, 

null, null, null); 

String id = null; 

if (contactCursor.moveToFirst()) { 

id = contactCursor•getstring( 

contactCursor.getColumnIndex(ContactsContract.Contacts • 一 ID)) 

} 

contactCursor.close (); 


Rctv-icvc 七 he sdedied 
Cov\{^c£s ID. 


seComd 




Ue 
^ucv-y 
vc*tv*icvcs 

do 山 6 七 dc*ta*il 

vov/s \wi*tK 
灼 umbels o*f 

*tV>c sclcd*tcd 


Cursor phoneCursor = getContentResolver().query( 

ContactsContract.CommonDataKinds.Phone.CONTENT—URI, 

new String[] { ContactsContract.CommonDataKinds.Phone.NUMBER }, 

ContactsContract. CommonDataKinds . Phone . CONTACT ID + '、= ? 


if 


new String [] { id }, 

null 


Pass *m select 3r\d 

sclcdtioy> av^urwC^ts *to sclcdt o\r\ly 
r\umbcv-s -fov 七 he selected dorrta 匕七 • 


(phoneCursor.moveToFirst() ) { 

phoneNumber = phoneCursor•getString(phoneCursor•getColumnlndex( 
ContactsContract.CommonDataKinds.Phone.NUMBER) 


phoneCursor.close(); 


return phoneNumber 
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only querying mobile numbers 


Just a little more rcflwlwg to do 


With the update of getMobilePhone to use a select 
statement using the selected contact ID, you’ll only retrieve 
phone numbers for the selected contact. This is good, 
but not good enough for you, a Head First rockstar! 

Here’s the catch. This current getMobile Phone 
implementation retrieves all phone numbers for the 
selected contact. But for this app, you only want mobile 
phone numbers! You can’t send a text message to a land 
line after all, so let’s make sure we retrieve just the mobile 
numbers. 


|\foy/ jus*b dc"t3»l v*ows avc 
batk, but >war\*b "to 
narrow -bV^a-t Ao>ny\ more 

•to just mobile 卟 ewe ^umbev-s. 


Contact 

Number 

Type 

Email l 

Sam 

555-299-2354 

Work 


Sam 

555-867-5309 

Mobile 


Sam 

555-998-9125 

Home 




So the phone numbers 
are narrowed down to just the 
selected contact. How do you 
make sure they are just mobile 
numbers now? 


Get more specific with your select statement. 

You’re already selecting phone numbers by passing in a select 
statement to the query. Now you need to get a little more 
specific and add a clause to that select statement that you only 
want to select mobile phone numbers. 


Luckily, there is a column referenced by the constant at 
ContactsContract.CommonDataKinds.Phone. 
TYPE that refers to the type of the phone number like 
mobile, home, or office. There are also constants for these 
different types in ContactsContract. The constant that 
refers to the mobile number type is ContactsContract. 
CommonDataKinds.Phone.TYPE MOBILE. 
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^harpen your pencil 


Below is the query to retrieve the phone numbers for the 
selected contact. The second query from getMobilePhone. 
Update the code below adding a second clause to the select 
statement for the phone type to be mobile. Use and to join 
the clauses in the select statement. Use the constants from the 
ContactsContract. 


Cursor phoneCursor = getContentResolver().query( 

ContactsContract.CommonDataKinds.Phone.CONTENT URI, 


Add *to *bWis st\td 
slaW ⑼七 ^ 

七 he v-csul-b doYJY\ 

ov>Iy mobile 


new String[] { ContactsContract.CommonDataKinds.Phone.NUMBER }, 


ContactsContract.CommonDataKinds.Phone.CONTACT ID 


9 


new String[] { id }, 

null 
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rendering the phone number 


^iharpen your pencil 

Solution 


Below is the query to retrieve the phone numbers for the 
selected contact. The second query from getMobilePhone. 

You should have updated the code below adding a second clause 
to the select statement for the phone type to be mobile. You 
should have used and to join the clauses in the select statement 
as well as using the constants from the Con tacts Con tract. 


七⑼ d 七 he 

select Wrtii ANP- 

Cursor phoneCursor = getContentResolver().query( 

ContactsContract.CommonDataKinds.Phone.CONTENT—URI, 
new String[] { ContactsContract.CommonDataKinds.Phone.NUMBER }, 

ContactsContract • CommonDataKinds • Phone • CONTACT—ID + '' = ? U 

Add A dd 二 

^+ Coh*ta^*tsCoh*tv , ad*t CommohDa*ta^mds.Plior\C.T N /PE + ” 二 ” 气 ^ -fov- 




Coh*ta^*UCoh-tv , ad*tCommohDa*ta^*mdsPhohc.T N /PE MOBILE, 


dompav"c- 


new String[] 
null 


id }, 



ihe 

ohilc % ^siay，i 

浐 ^orhp^v-isoh. 
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Tqst DriVQ 


Run the app and select the contact again, and you should see the 
display name and the phone number display for your selected contact. 



555 - 867-5309 



S 8:36 



name ^ undated- 


The phohC 
^urwbcv- is 
updated -too/ 


Now the display name AND the 
phone number are being displayed. 


I'm Cool! 


YouVe got two oi tke tkree renderContact kelper metkocts 
working. YouVe almost tkere! Vow it’s just tkat pltoto … 


you are here ► 
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displaying the contact photo 



Reaps Baw 

■V 

Cope 


Now show the photo 

There’s a great helper method for loading the photo for a contact in 
ContacsContact. Contacts called openContactPhotoStream. 
You’ll need to pass in the Content Resolver and a Uri. Notice that 
this Uri is using the ContentUris • withAppendedld. This is slightly 
different from the other Uri you’ve been using as it’s actually generating 
a new Uri based on a stored constant plus the ID you’re passing in Check 
out the online documentation for details. 


private Bitmap getPhoto(Uri uri) { 

Bitmap photo = null; 

A Similar <\ucvy *fco 5 C*t/\/Iob'ilcPiioy>c *to \rctv-icvc IP- 

String id = null; 

Cursor contactCursor = getContentResolver().query( 

uri, new String[]{ContactsContract.Contacts.—ID}, null, null, null); 
(contactCursor.moveToFirst()) { 

id = contactCursor.getString( 

contactCursor.getColumnlndex(ContactsContract.Contacts. 工 D)); 



/ 


Create ah IhpuiStv-carw 
usihg the helper method. 


contactCursor.close (); 
try { 

工 nputStream input = 

ContactsContract.Contacts.openContactPhotoInputStream( 

getContentResolver (), 

ContentUris•withAppendedld( 

ContactsContract.Contacts.CONTENT—URI, 
new Long(id).longValue()) 

); Use Bi-tmafFad-fcovy *to dedode the 

if (input != null) { C stream *m*to d \rcal, live 

photo = BitmapFactory.decodeStream(input); 

} 

input.close (); 

} catch (工 OException iox) { /* exception handing here */ } 

return photo; ^ - fho*to brUaf. 
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Tqst DriVQ 


Run the app and select a contact one last time. You should see all three 
fields update- the display name, the phone number AND the photo. 


® 8:01 PM 




Ben /CUcW 1 
/ , v ^ 

r “為 

^ - r 

LiK /, 

Sam 

^ r om J 

A 



TV ⑽ wbcv 

•,s d ㈣ 


Great work! All tkree metkocts 
are working to retrieve anct 
ctisplay tke contact inio! 



you are here ► 
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sending a text message 


fretting ready to send the text message 

The last feature to build before you can give the 
app to your users for testing is to send the text 
message. Pressing the “I’m Cool” button should 
trigger the text message, so before going any 
further, let’s add an onClick attribute to the I’m 
Cool button on screen and invoke a method called 
onlmCoolButtonClick in the Activity. 




<Button android : id="@+id/im_Cool" 

android:layout_width= n wrap_content" 
android: layout—height= n wrap—content ，， 
android: layout_centerInParent="true ，， 
android: text= ， ' 工 ， m Cool" 

android:onClick= M onImOkButtonClick , 


Add the OhCli^k 

p\ropc\rty -to the 
Cool butfcoh m ma'rn.xml 





Also add mc*t^od 

-to *tV^c 

tailed ky *tV^c 


main.xml 


public void onlmCoolButtonClick (View view) 


The CoAt *to str\d 七 
message will 50 m hc\rc- 




ImCool.java 
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How to send a text message 

Sending a text message on Android couldn’t be easier. There 
is a class called SmsManager with a method that sends a 
text message. As long as your app is configured with proper 
permissions to send text messages (using the android. 
permission . SEND_SMS permission) you can send text 
messages to whoever you like! 

Take a look at the sendTextMessage method. 



XKc 七-七 ^ 

Tiicsc av-c spcdial 
•m 七⑼ *U 七 ha 七乙 a” 
be like 

callbacks. You ^iov\ *t 

v\ttd bo use the 州 

-fov bdsi£. 七 e % 七 
message sc^dm^. 


"The phohC humbev" 
■to schd -the -tex-t 

message -to. 

sendTextMessage ( 

String phoneNumber r 
String serviceCenterAddress f 
String text, 

Pendinglntent sentlntent, 

子 1 Pendinglntent deliverylntent 



Make sure to add the send 一 sms permission. 

If you don’t add the SEND_SMS permission to your app and 
run it on a device, you’ll get an error about missing permissions. 
Stop now and ddd the android. permission . SEND_SMS 
permission to your AndroidManifest.xml file. 


you are here ► 
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adding the action 


Add the action method for the Tm Cool buttow 

Let’s make one small change to your Activity to 
send text messages. Right now，the contactUri is 
used to update the display after selection, but it’s not 
stored anywhere. For now, store the contactUri 
in your Activity as an instance variable. 



Now store the Uri of the selected contact when 
it’s passed back from the contact selection in 
onActivityResult. This way ， you’ll be able 
to call getMobilePhone to retrieve the selected 
contact’s phone number to send the text message. 



ImCool.java 


464 Chapter 11 






content providers 


Puzzjc 

Your job is to take the code fragments 
from the pool and place them into 
the empty onlmCoolButtonClick 
method. You may not use the same 
code fragment more than once, and 
you won’t need to use all the code 
fragments. Your goal is to make the 
onlmCoolButtonClick send the 
text message to the selected contact. 



public void onlmCoolButtonClick(View view) { 


Note: each thing from 



you are here ► 
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wrapping up 


puzzjc 

Your job is to take the code fragments 
from the pool and place them into 
the empty onlmCoolButtonClick 
method. You may not use the same 
code fragment more than once, and 
you won’t need to use all the code 
fragments. Your goal is to make the 
onlmCoolButtonClick send the 
text message to the selected contact. 



public void onlmCoolButtonClick(View view) { 

SmsManager smsManager = SmsManager. getDefault (); 

smsManager.sendTextMessage( 

getMobilePhone(contactUri), 

null , 

"Babe, I'm Cool! M , 

null, 
null); 


Note: each thing from 
the pool can only be 
used once! 
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GaOff piste 


Now that you have the hang of Content Providers, 
here are some other cool things to look into. 


/\udlO Co 妁 Wt 

Usm5 same Cout^ 70U 

lear^a sea^Wrn^ U 

V ou load audio W C^tcV. ou 

Iv>c a^v-oia ^acr.McdiaSW- 

Audio ^or more 上^一 

loadma alWw 

Covers ， 办 d rnort- 


PKo-to a^d \/idco 

Loadihg pho-tos ahd videos -fvom 
ihe device works ih a sir^ilav- way 
■too. Chcdk out McdiaSWc. (mages 
McdiaSWcVidco -fo^ more. 



Modi-fy Pa^ba 

Coyrtcht pvovidev-s av-c^t jusi vead 
orvly, you ddh modi-fy 匕 cm*teirv*t "too. 
pov aar^le, o\r modi-Pym^ 

d pliohC iriurwbeV '； 3ddi^ 3 »cv/ 
dhd W\OV*C- O^C^k OU 七 

dots -Pov move m*fo\rma*tio 妁 . 



Ma^y, many，move - 

lake a look a 七七 k a^dvoid. 

pvovidev- -fov even move 

doh-terrt you CaY\ access -Pvom you\T 

am ， 



I^Ari 七 C you\r owh/ 

you have da*t«i "m youv- app 
that you d like -to shav-e wi£h 
o*thcv- 3pps, you build youv* 
owh dohicht fvovidc^ that 
o*the\r apps dah <^uc\ry. Take a 
look at hUp ： //dcvdopcv.ahd^oid. 

Com/guide/*tof ids/p^ovidc^s/ 
^Oh*tch*t-p\rovidcv-s.lvtm| -fov move 
ih-Po\rma*tioh. 


you are here ► 
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picking the important stuff 


Your Android Toolbox 

The app is now functional! 

You implemented contact 
selection using native behavior 
and queries all of the contact 
details to render in the display. You 
also implemented text messaging and 
tested on a real world device. 



Iywok— native bcV)aviov 

0 tar, mvoke MWit.es, 

OV- a Wv-*|/A^oir\ II Y ou 

? as m tw.s IXri/MW dommbo, OS 

-t^c most heimb/ 

*to v"Cs^oy\d *to |y\*bc^*b* 

@ Usc do^sta^ts -from \^i ^ 

U\r*is a^d hcho^s 

^Use star 七 MW 七 / or , r 

as ^eded W youv 


a??. 




^uc\ryihg Cov\iads 

• Use Coh-tchtRcsoIvcv ahd co^sia^is -fi 

Coh*tadtsCoh*t\radi {jo <^uc\ry doh*t«ldts. 

@ 3 ⑶饮 al ih4^mat.Oh 

usih 9 the Q\ Coy^iati Uh v^ctu^cd 4 m 
sdcdt'mg a 

@ 匕 odadt derails With ihc help 

匕 Ohbdt dohsbhts ih CoY^iachCo^braci 

subclasses 

@ you\T <\uc\rics wiih sclcdt 

siatcmchts -to gei the da-ta you waht 


v-om 




BULLET POINTS 


■ Use native behavior by invoking an 
Intent with Actions and Uris 

instead of explicit Activity references. 

■ Check the online documentation for 
intent to see which Uris have native 
responders. 

■ Use constants for Actions and Uris 
whenever possible. This way you’ll be 
prepared when things change. 

■ Make sure to add the appropriate 
permissions for your app, this one needed 

READ CONTACTS and SEND SMS. 


■ 


■ 


■ 


■ 


■ 


■ 


Sometimes it's easier to test on the 
emulator and sometimes it's easier to test 
on hardware. Do what makes sense for you 
app. And make sure not to only test on the 
emulator since you’re deploying your app to 
the real world, NOT the emulator! 

Contact information is located in an on- 
device data store you can query like a 
database. 

Contact queries return Cursors, just like 
a database query. 

Contact information is stored in spearate 
records for main contact information and 
contact details. 

Query contact (and other OS stored 
information) information using 

ContentResolver. 

Easily send text messages from your app 
using SmsManager (and adding the 
send sms permission) 


u MLdvs 
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12 advanced graphics 



With all the competition in the marketplace, your apps need to 
do more than just work... they need to look great doing it! For 

some of your more basic apps, using the stock Android look and feel is fine. But when you 
want to built great looking apps that really wow your users and customers, you’re going 
to need to need to use graphics. In this chapter, you’ll learn two advanced techniques 
for adding images to your apps. First you’ll learn how to use images on your buttons. 

Then you’ll learn how to use special resizable images that will really help your apps look 
fabulous on all kinds of different screen sizes. 


this is a new chapter 
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updating the design 


It needs to be even better 

Sam dropped in while you were finishing up the 
message sending and asked for a quick look at the app. 
After showing it to her, it became clear that function 
alone is not enough. It needs to look great too. 



The app is working, but ifs 
kind of boring (sorry!). I like all 
my stuff to look HOT! How about 
polishing it up a bit? 


Good apps need good graphics 

You might be a strong engineer and a great graphics 
designer. And if you can design and build your 
own apps, this is where you’d open up your favorite 
graphics tools and create some great graphics to 
make the app look super slick. But if you’re like the 
rest of us, you’re going to need some help. 

Don’t worry though, with the super high quality 
graphics in even the most basic apps, getting outside 
graphics help is pretty standard these days! 


Let’s see if there is anyone who can 
help us out with this... 
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Meet the Head First Graphics Team 


Turns out there’s a great group of graphics 
artists dying to help you on your latest 
project! They just need you to send them 
an email describing what you need. 


Here’s your email to the 
Head First Graphics Team 




The Head 
^aphids Team. 


«oo 一 

Delete Junk Reply Reply All Forward Print To Do 

From: Me 

Help! I need some graphics 
Today 

Head First Graphics Team 

Hi Head first Graphics Team! Thanks for offering to help. 

I’m building an app with a contact’s picture displayed. But I need something to use 
when they don't have an image set. (Think of an avatar placeholder image). Do you 
think you could make something work? 

If so, and since this is Android supporting different device sizes, could you send me the 
image in three sizes... one for small, medium and large phone screen sizes? 

Thanks! 


you are here ► 
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how to make it happen 


ftive the app some polish 

The Head First Graphics Team just got back to you 
with a sketch of how to update the design of the 
app. Let’s take a look at their design and see what it 
would take to implement it. 


o o 

C9 

Delete 


Reply Reply Al' Forward 


Head First Graphics Team 
Help! I need some graphics 
Today 
Me 



Sure! Anything to help : -) 

Here’s a mockup of the app the way we’d like to see it! 
Some cool graphics spread around the app to make it 
look super cool for Sam and Scott. 


Now let’s see what needs to be done to 
make your app look like this picture. 
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Use buttow images... 

This design uses custom images for both the Update Contact and I’m 
Cool buttons. You’ll need to update the current buttons to use images ， 
and you’ll need to get those image resources (the actual images for the 
buttons) from the Head First Graphics Team. 



Use a dool 
bddk^\rouir>d irwa^C- 


...and use a background image 

This design has a background image that stretches across the entire screen. 
You’ll need to get this image from the graphics team and set it on the 
background. The issue here is that you don’t really know the actual 
size of the screen. Even if you know the screen grouping, the actual 
screen might be a a few more or less pixels than you’re expecting. To solve 
this, you’ll need to use a special kind of image that can resize. 


Turn tke page to get started 



you are here ► 
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using image buttons 


Use image buttons instead of plain, boring ones 


Let’s start implementing the Head First Design 
Team’s graphical update by adding the images for 
the buttons. 


Android provides a special button View called 
工 mageButton specifically for buttons with images. 
To use ImageButton, just declare a View of type 


工 mageButton and instead of setting the text, set 
the android : src attribute to reference an image. 


TV^c v\cy/ 


TiiC air>dv-o*id ： s\r£. 
atbribu*te should 


<ImageButton 

android : layout_width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 

android : src="@drawable/my 一 image 一 name 

/> 



Before you can add the ImageButtons to your layout, 
you need the images to use. Time for another email 
to the Head First Graphics Team asking for images 
from their mockup. 


« o o 


Me 

Help! I need some graphics 
Today 

Head First Graphics Team 


Hi again Head first Graphics Team. 


jr 


Youv latest email *to 
■the team. 


Reply Reply All Forward Print To Do 


The design you sent over with the added graphics looks fantastic! Tm working on the 
image buttons now. Can you cut those out and send me PNG files for them? 

Thanks! 
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Add the images to your project 

The Head First Graphics Team got back to you and 
sent you two images. Add them to your project under 
the res directories in drawable-hdpi. 


«oo 


Wcircs you\r \rcply -Pv-orw 
the tcarw/ 



res 


drawable-mdpi 




Watch it! 


Make sure to cover ALL of the 
screen resolutions you’re 
targeting. 


drawable-ldpi 


This chapter is just targeting high 
resolution screens. As you 1 re 
building your own apps ， you’ll need to add the 
button images for each resolution you’re targeting. 
You can still use just one selector file though. 
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updating your layout 


Add the ImagePutton 

With the new button images added to the res directory, 
update main . xml replacing the regular Buttons with 
工 mageButtons. Set the android : src attribute to the 
names of the images you added from the graphics team. 
Also, remove the android:text attributes from both buttons 
since the images both have styled text embedded in them. 




v*ic>w 

七 ype *to |m 〜 



〈ImageButton android : id=’’@+id/update_contact’’ 

android: layout—width= 〃 wrap_content 〃 vemove 七 

android: layout—height= 〃 wrap_content 〃 ， air>dv"oid : *tc % 七 


android : layout_below= 〃 @+id/contact—phone” 
android : layout—alignLeft= 〃 @+id/contact_name 〃 
android : layout_marginTop= 〃 10 dp 〃 


android : src="@drawable/update 一 contact_btn_bkg’’ 

/> 



*tiic view 

-type *bo 

〈ImageButton android : id=’’@+id/im_ok' 


android : layout—width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 
android : layout_centerInParent= 〃 true 〃 



Se 七 Ae a^dvo*id：svt *to 
七 he y>amcs 七 he images 

you added (VrthoiA 七七 he 



android:src="@drawable/im cool btn bkg" 
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Tost DriVq 


Now that you have the images added to your project and the 
工 mageButtons added to your layout, run the app and see how it looks! 




Select a contact 


Wow, those borders are 
looking pretty crazy! And when 
I press them they glow. Whafs 
going on there? 


l/VV>cv> you fws a bu*t*tor>, 
-the yay bovdev- *tuv^s 
a tolov so you kv>o>w iVs 
pvessed- 


Update Contact 


Tke images are ctisplayingf, tut you’ve got some cleanup to cto •“ 


you are here ► 477 














getting rid of the border 


Remove the background 

The image on an ImageButton doesn’t cover the entire 
button. The ImageButton has a default background and 
the image you set in the android : sre attribute is drawn 
on top of it. That’s why you have that weird border. If you set 
the background to null, you’ll just see you’re image. 


£c*t b 。 七 h 
a^dv-o*id ： badk^vouir>di 
values *to 
y>ull. 



Now take a look back at the app, and notice that the 
ImageButton borders are gone. All you can se now is the 
image drawable from the android : sre attribute. 


main.xml 



There's a lurking problem 
though. Try pressing one of 
the ImagePuttoHS mow... 
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Uggghhhh! Now the ugly 
border is gone but you 
can’t tell when the button 
is pressed. Lame! 


Lame, yes. But fixable! 

By default, the button indicates it’s being pressed by 
changing the background to orange. The indication that 
the button is pressed is really important for your users, 
but the big gray box around your great new images looks 
awful! What to do? 

The solution is to have two different images: one for when 
the button is pressed and one for when it isn’t. And since 
you need more images, that can only mean one thing... 
another email to the Head First Graphics Team! 


jr 


/W 七 hev email *to 
yafiVids 七 cam " 


矜 O O 


Delete 


m 

Junk 



Reply Reply All Forward Print 


To Do 


To: 


Me 

Help! I need some more graphics 
Today 

Head First Graphics Team 


Hi Head first Graphics Team! 

It turns out I need separate images for the button in pressed and non-pressed states. 
Can you send me images for those two buttons in their pressed states? The ones you 
sent before will work for the unpressed states. 


Thanks! 


you are here ► 
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adding more images 


Add the (new) images to your project 

Looks like Head First Graphics Team just got back 
to you! Let’s plug in the images they sent back. 



res 



drawable-hdpi 





drawable-mdpi 





drawable-ldpi 




C9 

Delete 


Junk 


Reply Reply Al: Forward Pri 


Head First Graphics Team 

Re: Help! I need some more graphics 

Today 

Me 

Hello again! 

We added some highlighting to the non-pressed images. This 
should make it clear when they are pressed and not pressed. 

Let us know if you need anything else, and good luck with the 
app. 


Using different images for button states 

There is only one attribute - android : sre - to 
set the image on an ImageButton. But you want 
to use two different images: one when the button is 
pressed and another one when the button is in it’s 
normal state. You could add a listened to the button 
and change the image displayed when pressed, but 
there is a much easier wav! 
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Update Contact 


update_contact—btn_ 
pressed.png 


Cool! 


im_cool_btn_pressed. 

png 



o 










































advanced graphics 


Use selectors to control button images 

Selectors allow you to define multiple images to use for 
buttons based on state. Selecters are implemented as 
XML files with elements inside the file referring to specific 
states, and which image to use for that state. Then you can 
set the selector as the drawable instead of a specific image, 
and the 工 mageButton will automatically select and 
update the image according to its state. 



When the button is not pressed 

The selector returns the default button image when the 
button is NOT pressed. 




get image 



><ML ^il 


t 


im cool button.xml 


im_cool_btn.png 


^ 一 "the 
dc-Pault 



When the button is pressed 

The selector returns an alternate button image when 
the button is NOT pressed. 




t 


you are here ► 
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using selectors 


Make a new selector file 

Start by making a new selector XML file. You can 
create one using the same wizard that you use to 
create new Android layouts and other XML files. 
Select File — New — Android XML File to 
launch the wizard. 


Sclcd*t 



Whal type of resource configuration would you like? 



Select the root element for the XML file: 


Sclcdt sclcd*to\r 
-fvom diropdow^. 
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advanced graphics 


Where is the selector file? 


The new empty selector XML file was created 
by default in the res/drawable directory. 







Selectors are just pointers to files, and the 
Android runtime finds the right ones. 

By default, Android looks in the drawable directory fro the 
selector files. But when it comes to loading an image, the Android 
runtime tries to load images first from the resource folder specific 
to the screen size group. So in this case, the selector XML can 
live perfectly happy in the drawable folder and be found by the 
runtime. But when an image gets loaded, the runtime starts by 
looking in the drawable-hdpi folder {assumingyou’re running on a high 
resolution device) and loads the image from that folder. 


you are here ► 
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adding selector items 


Open the new selector file 


Navigate to res/im_cool—button • xml and 
double click to open it. The autogenerated file 
starts out with an empty selector. 




Navigate to the im_cool_ 
button . xml in the Package 
Explorer. You can fund it under 
the res/drawable directory. 
Double click top open it and you’ll 
see an empty selector file. 



tteve is 

(duvvcv>*tly) ci^p*ty 
sclcd*tov dcdlava*tioy>. 


<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 

〈selector xmlns : android= 〃 http://schemas.android.com/apk/res/android ’’〉 


You II be 

七 he sclct*tov by dddms 
images s*ta*tcs hcv-c. 
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advanced graphics 


Add the image pointers 


The autogenerated selector is empty and 
you need to add the links from specific states 
to the images that should be displayed for 
them. You’re going to need two image/state 
combinations: one for when the button is 
pressed and one when it’s not. 




Cool! 


im_cool_btn.png 



im cool button.xml 


You *to add 

•these Irnks *m 
*tV>c sclcd*to\r. 



Cool! 


im_cool_btn_pressed. 

png 


Add items to the selector 

Linking a state to a drawable inside selectors is done 
by defining <item> elements. Here is an item 
element that will render the im_cool_button . 
png image when the button is pressed. 


Tiiis is m 
butto 灼 is pvessed- 



you are here ► 
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updating the selector 



Selector Magnets 

Below is the empty selector from button_im_cool. xml. Use 
the code magnets to add two items to the selector. Add one item to 
show im_cool_btn_bkg . png when the button is not pressed. 
And add another item to show im_cool_btn_bkg_pressed. 
png when the button is pressed. 


<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 

〈selector xmlns : android= 〃 http://schemas.android.com/apk/res/android ’’〉 


Add 

"""" V>cv*c- 


</selector> 


Youv* 




button Jm_cool.xml 
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6ee} BifS 


This selector will only work on devices that fall in the HDPI category. 
This is fine (for now) since we know Sam and Scott both have HDPI 
Android phones. With that in mind, you should do careful analysis of 
your target users and make sure to cover their devices as well. 


Here are some tips to cover as many devices as possible. 





Put default drawable images in drawable 

The other folders contain device group specific 
images. But if an image resource isn’t found 
for the specific device group (or a new group is 
introduced) the Android runtime will check here. 


Add images for each screen group 

Each screen grouping will try and load its pecific 
images. Make images for every group and add 
them to appropriate folder. 


Look for new screen groups 

With the addition of tablets and larger phones, the 
number of screen groups is growing. Keep an eye 
out for these new groups and make sure you have 
the resources you need for these groups. 


And remember, you don’t need resources for every single resolution. You might find that 
with flexible layouts and decent scalable images, you can get away with really great 
hdpi and mdpi images and you’re all set. Don’t do more work then you have to, but 
do make sure your app looks great on all devices. 
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using the selector 



Selector Magnets Solution 

Below is the empty selector from button_im_cool. xml. You 
should have used the code magnets to add two items to the 
selector. The first item should show im_cool_btn_bkg . png 
when the button is not pressed. And the other item to show im_ 
cool_btn_bkg_pressed. png when the button is pressed. 


<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 

〈selector xmlns : android= 〃 http://schemas.android.com/apk/res/android ’’〉 


This i 七 cm is m butto 灼 is MOT jessed, 

I Sy)d i*t displays im 一 dool 一 dv*a>wablc. 


〈item I an droid: state 一 pressed:’’false 


/A 


android:drawable=’’@drawable/im 一 cool_btn 一 bkg’’ I /> 


"This item is when -the burttis is pvessed ； 扣 d 

it displays -the irw 一 6ool 」 > 七的一 bkg^pvessed dv-awable- 



button Jm_cool.xml 
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Set the selector as the button's drawable 

The selector is a drawable, so you can set it as the 
background just like using an image. The last step 
before testing the selector is to set the android : sre 
attribute on the 工 mageButton to the selector 
instead of pointing directly to an image drawable. 




<ImageButton android : id= 〃 @+id/im_ok 〃 

android : layout_width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 
android : layout_centerInParent= 〃 true 〃 


android : src=’’@drawable/button 一 im_cool 

android : background= 〃 @null 〃 


rr 


/> 


</RelativeLayout> 


\ 

st\tt{pr as i\\t dvav/ablc 
^ -tV^c kayBu 七仏 



main.xml 


thereiare no o 

Dumb Questions 


These selectors look cool, but what if I want to use a 
different image when the button is, say, disabled? 

Pressed isn’t the only state you can use for your selectors. In 
addition to pressed, you can also create items referencing focused, 
selected, checkable, checked, enabled, and window focused 
states. Whew, that's a lot of states!. 


Oh cool. But what if I want to combine then? Say I want 
to use one image when a button is disabled and pressed. 

No problem! You can combine as many states as you want 
to in a selector item. Just add additional attributes to the item you 
want to configure with multiple states and you'll be all set. 
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testing the selector 



TesT DriVq 


Now that you have the selector in place, run the app and see how the 
“I’m Cool!” button looks when pressed and not pressed. 



Select a contact 




W\\cy\ button 

•is / 七 fvessed, *i*t 


looks jus 七 Ii 
did bc-fov-c- 


s 七 like I 七 



But when -the 
bu-t-fco^ is pressed, 
i"t aurfeomati 匕 ally 

sy/iidhes -fco 七 he 
pressed irv\d^e/ 


Looks great! 


Add the selector for the update contact button 

Now that the Button images are working 
for the I’m Cool button, let’s add another 
selector for the Update Contact button. 

Start by adding a new selector XML file 
called button update contact. xml. 



Da this! 


Run the new Android XML file 
wizard again and create a new selector 
selector XML file called button_ 
update contact.xml. 
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ExcirciS6 


Below is the empty selector for the update contact button. Add two items to that selector 
for the pressed and unpressed states as well. The unpressed state should point to update— 
contact_btn_bkg. png and the pressed state should point to update_contact_ 
btn_bkg_pressed. png. When you’re done, update the snippet from main . xml below 
to use your new selector. 


<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 

〈selector xmlns : android= 〃 http://schemas.android.com/apk/res/android "〉 


</selector 〉 


•• 七 ems hcvc -Pov ur>fv*csscd 
By\A fvcsscd button s*ta*tcs. 



button_update_ 

contactxml 


<ImageButton android : id= 〃 @+id/update_contact 〃 
android : layout_width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap_content 〃 
android:text=〃Update Contact” 
android : layout_below= 〃 @+id/contact—phone” 
android : layout—alignLeft= 〃 @+id/contact—name” 
android : layout_marginTop= 〃 10dp 〃 


Se 七七 he dv-awablc 
b> sclcd*fco\r- 





main.xml 
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adding another selector 


BtGRaSe 
©OLutlOH 


Below is the empty selector for the update contact button. Add two items to that selector 
for the pressed and unpressed states as well. The unpressed state should point to update— 
contact_btn_bkg. png and the pressed state should point to update_contact_ 
btn_bkg_pressed. png. When you're done, update the snippet from main . xml below 
to use your new selector. 


<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 

〈selector xmlns : android= 〃 http://schemas.android.com/apk/res/android ’’〉 


<i*tcm ay\droid ： sta*te^pv-esscd= lW -falsc w 


ahdv-oid ： dv-awablc= lU @div , a>wablc/upda*tc IrU bka w /> 

» •• 參 •••••••• 》 •» • 秦 •••• • 參 •••••••••• •• 拳 •••••••••• 拳 • •• 拳 • • 參 •• 參 •_•••• • • • • • •••••• 


<i*tcm ay\dhroid:sia*t^j^ressed 二 ” *brue” 


Tv/o i*tcrws, -fo\r 
pv-csscd Bv\d 
u^pv-csscd states. 
Jus*t like 七 he I’m 
Cool bu*t*fco^- 


a^droid^ray/ablc—'^dva^ablc/upda-tc dorrtad 七 IrU bk<x p\ressed w /> 

• •••••••••••••••••••••••••••••••••••••••••••••••••a •••••• • 參 •••《•••• • • • • • ••••••• 

</selector 〉 



button—update— 
contact.xml 


<ImageButton android : id= 〃 @+id/update—contact” 
android : layout—width= 〃 wrap_content 〃 
android : layout—height= 〃 wrap—content 〃 
android: text =,, Update Contact^ 
android : layout_below= 〃 @+id/contact—phone” 
android : layout—alignLeft= 〃 @+id/contact—name 
android : layout marginTop= 〃 10dp 〃 


Se 七 ar>dv-oid ： svd 

a*t*tv*ibu*tc *to *thc 
sclcd*tov as i*U dv-awablc. 






android : background=〃@null 
/> 



main.xml 
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advanced graphics 



Tesr DriVq 


Run the app now and pay close attention to the two buttons. Press and 
unpress the buttons a few times and watch their states go back and forth 
from pressed and unpressed, changing images between the two PNG 
files as the states change. And all you had to do was make a selector! 


tlltk OY\ 七 

w Wpda 七 c C 。 山乂 ’ W 七 W 
妊 c •，叫 c Aa 呼 s. 



Great work! 
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setting the background 


Now for the background image 

The buttons are looking great, so it’s time to move 
on to the background image. The Head First 
Graphics Team mocked up the background and 
sent along the image they used. 




this! 


Add the new file 
skateboard_background. 
png to your project. 



skateboard, 
background.png 


Put there's a problem lurking... 

The Head First Graphics Team sent you a 
background image that is 300x300 pixels. But 
Android devices can be all kinds of different sizes! 
Android can resize the image, but this resizing can 
make your images look pretty bad with default 
stretching.. Just take a look: 
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advanced graphics 



Wouldn t it be dreamy if there was 
a way to make images look great on all 
different sizes of Android devices. But I 
know it's just a fantasy... 
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using 9-patch images 


Use 9-patch images... 


You can use a technique called 9-patch images 
to really help deal with these variances between 
screen sizes. 9-patch images work by specifying 
vertical and horizontal stretching sections not 

the entire image. 


This 
doesn't \rcsizjc 


This sc 匕 *tio 灼 tBr\ 
s*t\rc*t^h oy\\ 


This tBy\ 

s*tvc*t^h v/id*th 
AKD height 


This scd*tioir\ 
docs^^-t resize. 


This sc 匕 *ticm tBr\ 
s-t\rrt^h only. 



This settlor 
docsr / 七 resize- 


This scd*tioi^ 
doesn't vcsizjC- 


This scd*tior\ tBr\ 
vcsizjC y/id*tK only. 


Then, when the image needs to be resized, it only resizes 
the portions you’ve specified can be stretched either 
vertically, horizontally, or both. 
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... which can look great when resized! 

The image can be resized as needed, but since the areas 
specified scale well and can be stretched, the image looks 
great in all of these sizes. Here are extreme stretched 
versions of this image as the size of the background in 
portrait and landscape mode. 


► 



Look Kov/ i\\t settlor y/as MtrhtaW 

^ 如 W 士 士 ’ll looks 

(Vrcat 1 TV>e tUd also Kon^-tallv 

a little a^d st.ll look yrtal All all 广 c 

*.s a LOT but st»ll looks A 付！ 


ttcv-c is 七 he siz^d -fov- a la^dsdapc 

ba 乙 kyoimd. The vc\rtidal sky fav-t s-tv-etdhed 
a li-ttlc bi*t> but the dlouds s*tv-ct^hcd b TON 

hov-izjo^*tally. - but still looks yredri! 
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creating 9-patch images 


Making your own 9-patch images 

Making your own 9-patch images is a snap, 
but you’ll need to follow a little process to do 
it. Here is what you’ll need to do. 



Get a raw PNG image 

9 patch images start with plain old PNG 
images. The only thing special about these 
images is that they have to resize well based 




my—pic.png 

Edit the PN& in Draw 9-patch 

Draw 9-Patch is an application that 
comes with the Android SDK. Using this 
application, you can define the resize points. 



❺ Use the 9-patch image 

Once you save a 9 patch image 
from Draw 9-Patch, it works just 
like a regular drawable that you can 
use in your XML files. 


The y °( bc-fov-c 
*tv>c lc*ts 
you \ cy\ovi i*t’s a 




my_pic.9.png 



Casing Images J]p Cl^se 

Using 9-patch images works really 
well, but only for images that have a 
stretchable area. For this to work, you’ll 
need a section that can be stretched 


horizontally, a section that can be 
stretched vertically, and they have to 
intersect. 



丁 his has 

a stirc-tdliablc 
^ - hoirizjOh-tal ay\d 

AhfP they 



This docs^*t have 
s*tvc*tdKablc settlors. 
you *tvy ay>d S*tvc*tdii this imay 
y/'ill look dis*to\rtcd. 
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Open Praw 9-patch 


The draw9patch application is location in 
your <android home>/tools directory. 
You can launch it by typing at the command line 
〈android home>/tools/draw9patch. 


You … 。 灼’七 have *to 七 he 

-Pull f a*tV> *to av>dvo*id home 
i-f you add *i*t *to youv path- 



When draw9patch opens, you’ll see this empty 
screen since there is no 9-patch image opened yet. 
From here, you can open a plain PNG file to create 
a new 9-patch image, or an existing 9-patch to edit. 
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adjusting the patches 


Open your PNfr 


Open the background image by dragging the 
PNG onto draw9patch. Since you’re working 
on the background image, take the background 
image that the Head First Design Team sent 
you and drag it onto draw9patch. 


« o o 


CL folder 


al 叫七 h 

dy\d zx>on\ 



py-cv'icws of 
resized 
images a*t 

did ⑽灼七 
s'iz^s a^d 

ov-*icy\ta*tioir\s. 

Sd\roll uf 
and dow\r\ -to 

sec w\OV"C- 


Zoom: 100% 


Patch scale: 2x 
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Adjust the path bounds 


The path bound are what control the 
different patches of the 9-patch image. Draw 
pixels on the left, top, right and bottom edges 
to add to the resizing sections. 



pv3>/ *bV>c oy \ *tV>c 

"to wav'k 七 he 
s*bv"c*t^^afelc aveas. 


Press SWft to erase pixels 


80096 _ Show lock 


Show patches 


0 y \ tlic \right you’ll 
a plrcvicv/s o( the 

s-tvetdhed. 


Draw 9-patch: /Users/jon\hansimon/Dropbox/HFAD-Personal/workspacG/ChaptGrll-BabGlmCool/res/drawable-hdpi/skateboard_background.9.png 


Shov\)ad patches 


/ 多 


Alakc suv-c h> sclcd-t 
“Show "to 

3 preview o( the 
st\rc-Uhablc patches. 


The / pixel bbdk 
oh the edges 
the i^a\rk the 
st\rctdhablc av-ea. 


Stretched 
image looks 
WAY better! 


Show content 
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use the 9-patch 


Add the 9-patch image to your project 


From inside draw9patch, go to File Save 
9-patch... and save the file in your project’s 
res/drawable-hdpi directory. Make 
sure to save it with a .9.png extension. 





res 



drawable-hdpi 



drawable-mdpi 



skateboard. 

background. 9 . png 



Add i\\t *to youv- 

pvojcd*t dv>d make SuVC l*t 

has 七 he . 卞卜 3 



drawable-ldpi 


After you add the 9-patch image file to your project, 
you’ll see an updated R file including a @drawable 
constant for your new 9-patch image. 



Make sure skateboard_background.png isn’t in your 
project when you try and save the 9-patch. 

The 9-patch drawables are not unique, they are just drawables 
with special extensions. As far as the Android runtime is concerned, 
skateboard—background.png and skateboard_background. 9.png are 
the same drawable resource (they just act different in the running app). So if you 
already added skateboard—background.png to your project, make sure you delete it 
before adding saving the 9-patch image or you’ll get a nasty error! 
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Use the 9-patch image m your layout 


Once you have the 9-patch image added to your 
project, you can use it like any other drawable. You 
can set it as the android : sre of an 工 mageView or 
工 mageButton, or the android : background for a 
other Views. 



Below is the beginning of the main RelativeLayout for the main screen. Set the 
background of the layout to your new 9-patch image using the android : background 
attribute. This will set the 9-patch image as the background for the entire screen. 


<?xml version^"1.0" encoding= M utf-8"?> 

<RelativeLayout 

xmlns : android= n http :// schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout—height= n fill—parent" 

> 


<TextView android : id= M @ + id/contact_name" 

android:layout_width= M wrap_content" 
android:layout_height="wrap_content" 
android:layout_alignParentTop= M true" 
android:layout_alignParentLeft= M true M 
android:layout—marginLeft="20dp" 
android:layout_marginTop="20dp n 
android:textSize="20dp" 
android:textColor= M #ffffff" / > 




main.xml 
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test the background 



Below is the beginning of the main RelativeLayout for the main screen. You 
should have set the background of the layout to your new 9-patch image using the 
android ： background attribute. This will set the 9-patch image as the background for the 
entire screen. 


<?xml version="1.0" encoding= M utf-8"?> 

<RelativeLayout 

xmlns : android= M http :// schemas.android.com/apk/res/android' 
android:layout—width="fill—parent" 
android:layout height="fill parent" 






<TextView android : id= M @ + id/contact—name，' 

android:layout_width="wrap_content" 
android:layout_height= M wrap_content M 
android:layout_alignParentTop= M true" 
android:layout_alignParentLeft="true' 
android:layout_marginLeft= n 20dp" 
android:layout_marginTop= M 20dp" 
android:textSize= M 20dp M 
android:textColor= n #ffffff" / > 




Sc 七栋 c a 朽 dbro»d:featk^ro 奶 d 

pv-opcv-bY 1 -? 




main.xml 
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Tesr DriVq 


Now that the 9-patch image is set as the background, run the app 
and see how it looks! 



Select a 
contact 


TV\c featkyou^d 
looks 七 ! 


These ^orhpohCh*t 
posi-tiohs look aw-Pu|/ 








adjusting the layout 


Adjust the padding 

Usually padding isn’t an issue with 9-patch images and you 
can easily use them as backgrounds for ImageButtons 
and other Views. But when you set the background of a 
RelativeLayout to a 9-patch image, you need to watch out for 
padding issues. It’s an easy fix though. set the padding to Odp 

and you’ll be all set. This overrides any default padding the 
Android runtime is trying to use which was causing all of that 
crazy positioning. 


<RelativeLayout 

xmlns : android= M http :// schemas.android.com/apk/res/android" 
android : layout—width="match—parent，' 
android : layout—height= n match 一 parent ’， 

android : background="Qdrawable/skateboard 一 background" 

android : padding= n Odp" 气 —-义七 -the padding -to Odp. 


> 



main.xml 


Can I use 9-patch images with 
selectors? 

You sure can, and it’s a pretty 
common thing to do. You can use a 9-patch 
image for a button background, with one 
for pressed and one for not pressed. Then 
use Android text rendering instead of 
using the text embedded in the image and 
you can use the same pressed and non- 
pressed images over and over again! 



DO I have to make separate 
9-patch images for different screen 
densities? 

Yes. Like all other image resources, 
9-patch images are density dependent. 
Since 9-patch images scale though, you 
can sometimes get away without it. But 
it’s always a good idea to include multiple 
densities. 


Do the 9-patch images have to 
resize the same for each pixel density? 

No. The 9-patch image includes both 
the image as well as the resizing areas. 
(The resize is marked with black pixels on 
the image border). So you can resize the 
images differently for each screen density. 
That said, you probably want to keep them 
pretty similar to keep your app consistent. 
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Tesr DriVq 


Try running the app again, this time with the overridden padding set to Odp. 



1112223333 


Cool! 


TV^c buttons 
av-c 6o\r\rct*tlY 
positioned look 
yea 七 

imd^CS. 


The badkyou 灼 d 

imd^e looks jv-cat- 


Way tetter. Looks great now! 
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using the app 


Out iw the wild 

Testing the app is one thing, but the real 
reason you’re building the app is for Sam 
and Scott to use it! Let’s give them the app 
for the day and see how they use it. 
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Snap! My Phone just buzzed. 
Hey, ifs Sam using our new app 
I bet he just did a big drop, 
and let me know he's OK. Man, 
thafs so sweeeeeet! 
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Og Piste - 

That was some great work you did with the button graphics and 9-patch backgrounds. Here 
are some other things to look into if you want to make the app even better! 


Use mo\rC 5 — 孓 3 七 images 

TV>CV"C av-c r>umbcv- of you 

6ould use -to ^akc i\\t 

a 代 doolcv". You dould use 
”- images -for \)o{\\ buttom 

you 6ould also make a tool 
boV"dcv" -fov Cor\\^(M 一 。 to 

-to make rt s*tav>d ou*t a Irbtlc more’ 


Add Iota 七 ioh "to 七 he 七 x 七 

|*ts Coo\ *to let someone khow 
you \rc 0 ^) bu*t CVCh CooltY" "to lc*t 
七 hem khow whc\rc you a^c *too/ iVc 
woh ； t 90 ih-to it hc\rc, but look ih*to 

■the Android lo^atioh APIs ahd add 

lo^atioh ih-fo -to the message 

the afp is sehdih^. 


Save selected 

y ou ^obdbly r>oti6cd 妊 at cve^ry 

-time you \rar> *tV>c you Kad *jx> 
sclc6*t *t^c 60 山匕七 ay W TV>a*ts 
because »*t s r>o*t bc'm^ saved *to 
Ae database. Use 4 a 七 youVe 
ledv-^ed about A^dv-o'id S<$Li*tc 
da-tabascs *bo save 6 or>*t 3 ^*t 3^d 
auWat^ally reload i*t or> startup. 
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Your Android Toolbox 


You just did some major 
graphics heavy lifting! Let’s 
review what you’ve learned 
here that you can apply to all of 


your apps. 


” 一 ? ways 


stthoY\s overlap j 

^Usc ^ mark 

sc6*t*»oy\s 

@ Use 咿 jusUke 岬。如 v doable 

Sclcd*to\rs 3nd |i»»a^cBu't'tohS 

，參 Add images -Pov* -the siaics (i.c pressed, hot 
pressed, selected, hot sclcdcd, cic) 

0 Create a sdediov XML -file usih^ ihe wiz^ivd 

0 Add items -Pov* tat\\ siaic ahd vc-fcvchdc the 
image d\rawablc to use -Pov* that s-taic 

0 The sclcdtov is a 'd^awablc' so set the 
dvawablc souvdc oh youv* (mageButtoh to the 
sclcd-tov* 






BULLET POINTS - 

■ Use 工 mageButtons when you want to 
use images for your buttons. 

■ Set the background drawable to @ null to 
remove borders. 

■ Use Selectors to add multiple images to a 
single button based on state. 

■ Selector XML files go in the res/ 
drawable directory. You don’t need a 
separate selector for each screen size. 

■ Use 9-patch images to create expandable 
images 

■ Once you have a good PNG, use 
draw9patch to mark the resiable sections. 

■ Add 9-patch images to your project just 
like any other image drawable, in the res 
directory specific to your screen size. 

■ Make sure you have separate 9-patch 
images for each screen size group you are 
supporting. 

■ You can use 9-patch images for all kinds of 
resizable needs: background of EditTexts 
and TextViews, layout backgrounds, and 
more! 














picking the important stuff 


Leaving toww... 



It’s been great having you here m Androidville! 

We’re Sad to see you leave, but there’s nothing like taking what you’ve learnt 
and putting it to use. You’re just beginning your Android journey and we’ve put you in the 
driving seat. We’re dying to hear how things go, so drop us a line at the Head First Labs 
web site, www.headfirstlabs.com, and let us know how Android is paying off for YOU! 


piJEare \iStmf>ter ^2512 


